更新我的资源

src/components/TheEmpty/index.module.less

@@ -0,0 +1,6 @@
+.theEmtpy {
+  padding: 30px 0;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}

src/components/TheEmpty/index.tsx

@@ -0,0 +1,20 @@
+import { defineComponent } from 'vue';
+import styles from './index.module.less';
+import { NEmpty } from 'naive-ui';
+
+export default defineComponent({
+  name: 'the-empty',
+  props: {
+    description: {
+      type: String,
+      default: '暂无数据'
+    }
+  },
+  setup(props) {
+    return () => (
+      <div class={styles.theEmtpy}>
+        <NEmpty description={props.description} />
+      </div>
+    );
+  }
+});

src/components/TheSearch/index.tsx

@@ -23,7 +23,7 @@ export default defineComponent({
         class={styles.TheSearch}
         round={props.round}
         placeholder="请输入搜索关键词"
-        v-model={searchData.value}>
+        v-model:value={searchData.value}>
         {{
           prefix: () => (
             <>
@@ -36,7 +36,9 @@ export default defineComponent({
               size="small"
               round
               type="primary"
-              onClick={() => emit('search', searchData.value)}>
+              onClick={() =>
+                emit('search', searchData.value ? searchData.value.trim() : '')
+              }>
               搜索
             </NButton>
           )

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

@@ -77,7 +77,7 @@
       font-size: 16px;
       max-width: 180px;
       color: #131415;
-      font-weight: 600;
+      font-weight: 600 !important;
       flex: 1;
     }
   }

src/components/card-type/index.tsx

@@ -11,12 +11,12 @@ import VideoPlayer from './video-player ';
 
 type itemType = {
   id: string | number;
-  type: 'IMG' | 'VIDEO' | 'AUDIO' | 'SONG';
-  url: string;
+  type: 'IMG' | 'VIDEO' | 'SONG' | 'MUSIC';
+  coverImg: string;
   content?: string;
   title: string;
   isCollect: boolean;
-  isSelected: boolean;
+  isSelected: boolean; // 精选
 };
 
 export default defineComponent({
@@ -69,10 +69,10 @@ export default defineComponent({
         case 'VIDEO':
           typeImg = iconVideo;
           break;
-        case 'AUDIO':
+        case 'SONG':
           typeImg = iconAudio;
           break;
-        case 'SONG':
+        case 'MUSIC':
           typeImg = iconMusic;
           break;
       }
@@ -97,17 +97,17 @@ export default defineComponent({
           {{
             cover: () => (
               <>
-                {['IMG', 'SONG'].includes(props.item.type) && (
+                {['IMG', 'MUSIC'].includes(props.item.type) && (
                   <NImage
                     class={[styles.cover, styles.image]}
                     lazy
                     previewDisabled={props.disabledMouseHover}
                     objectFit="cover"
-                    src={props.item.url}
+                    src={props.item.coverImg}
                   />
                 )}
                 {/* 音频 */}
-                {props.item.type === 'AUDIO' && (
+                {props.item.type === 'SONG' && (
                   <AudioPlayer
                     content={props.item.content}
                     previewDisabled={props.disabledMouseHover}
@@ -116,7 +116,7 @@ export default defineComponent({
                 {/* 视频 */}
                 {props.item.type === 'VIDEO' && (
                   <VideoPlayer
-                    cover={props.item.url}
+                    cover={props.item.coverImg}
                     content={props.item.content}
                     previewDisabled={props.disabledMouseHover}
                   />

src/utils/contants.ts

@@ -18,3 +18,13 @@ export const instrument = {
   4: '陶笛',
   5: '葫芦丝'
 };
+
+/**
+ * @description: 资源类型
+ */
+export const resourceType = {
+  VIDEO: '视频',
+  IMG: '图片',
+  SONG: '音频',
+  MUSIC: '曲目'
+};

src/utils/searchArray.ts

@@ -16,3 +16,6 @@ export const teachingArray = getValueForKey(constant.teaching);
 
 // 乐器
 export const instrumentArray = getValueForKey(constant.instrument);
+
+// 资源类型
+export const resourceTypeArray = getValueForKey(constant.resourceType);

src/views/attend-class/index.tsx

@@ -125,7 +125,7 @@ export default defineComponent({
           id: '5',
           name: '歌曲表演 大鹿',
           title: '歌曲表演 大鹿',
-          type: 'AUDIO',
+          type: 'SONG',
           content:
             'https://cloud-coach.ks3-cn-beijing.ksyuncs.com/1686819360752.mp3',
           url: 'https://gyt.ks3-cn-beijing.ksyuncs.com/courseware/1687916228530.png'
@@ -144,7 +144,7 @@ export default defineComponent({
           id: '4',
           name: '歌曲 其多列',
           title: '其多列',
-          type: 'SONG',
+          type: 'MUSIC',
           content: '43541',
           url: 'https://cloud-coach.ks3-cn-beijing.ksyuncs.com/music-sheet-first/1687847690372-1.png'
         }
@@ -204,12 +204,12 @@ export default defineComponent({
           activeItem.videoEle.stop();
         }
 
-        if (activeItem.type === 'AUDIO' && activeItem.audioEle) {
+        if (activeItem.type === 'SONG' && activeItem.audioEle) {
           activeItem.audioEle.stop();
         }
         // console.log('🚀 ~ activeItem:', activeItem)
         // 停止曲谱的播放
-        if (activeItem.type === 'SONG') {
+        if (activeItem.type === 'MUSIC') {
           activeItem.iframeRef?.contentWindow?.postMessage(
             { api: 'setPlayState' },
             '*'
@@ -353,10 +353,10 @@ export default defineComponent({
         () => {
           const item = data.itemList[index];
           if (item) {
-            if (item.type == 'SONG') {
+            if (item.type == 'MUSIC') {
               activeData.model = true;
             }
-            if (item.type === 'AUDIO') {
+            if (item.type === 'SONG') {
               // 自动播放下一个音频
               clearTimeout(activeData.timer);
               message.destroyAll();
@@ -424,7 +424,7 @@ export default defineComponent({
         setModelOpen();
       }
 
-      if (item?.type == 'AUDIO' && !item.audioEle?.paused) {
+      if (item?.type == 'SONG' && !item.audioEle?.paused) {
         setModelOpen();
       }
     };
@@ -457,10 +457,10 @@ export default defineComponent({
       if (activeItem.type === 'VIDEO' && activeItem.videoEle) {
         activeItem.videoEle.pause();
       }
-      if (activeItem.type === 'AUDIO' && activeItem.audioEle) {
+      if (activeItem.type === 'SONG' && activeItem.audioEle) {
         activeItem.audioEle.stop();
       }
-      if (activeItem.type === 'SONG') {
+      if (activeItem.type === 'MUSIC') {
         activeItem.iframeRef?.contentWindow?.postMessage(
           { api: 'setPlayState' },
           '*'
@@ -605,7 +605,7 @@ export default defineComponent({
                       </>
                     ) : m.type === 'IMG' ? (
                       <img src={m.content} />
-                    ) : m.type === 'AUDIO' ? (
+                    ) : m.type === 'SONG' ? (
                       <AudioPay
                         item={m}
                         ref={(v: any) => (data.audioRefs[mIndex] = v)}

src/views/natural-resources/api.ts

@@ -0,0 +1,10 @@
+import request from '@/utils/request';
+
+/**
+ * 资源 - 曲目列表
+ */
+export const materialQueryPage = (params: any) => {
+  return request.post('/edu-app/material/queryPage', {
+    data: params
+  });
+};

src/views/natural-resources/components/my-collect/index.module.less

@@ -0,0 +1,113 @@
+.list {
+  margin-top: 12px;
+
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: flex-start;
+  gap: 22px;
+}
+
+.searchGroup {
+  position: relative;
+  padding: 0;
+
+
+  .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 {
+    position: absolute;
+    top: 4px;
+    right: 0px;
+    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;
+      }
+    }
+  }
+
+  .searchCatatory {
+    display: flex;
+    justify-content: space-between;
+    padding-bottom: 24px;
+    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;
+      }
+    }
+  }
+}

src/views/natural-resources/components/my-collect/index.tsx

@@ -0,0 +1,88 @@
+import { defineComponent, onMounted, reactive } from 'vue';
+import styles from './index.module.less';
+import CardType from '/src/components/card-type';
+import Pagination from '/src/components/pagination';
+import SearchGroupResources from './search-group-resources';
+import { materialQueryPage } from '../../api';
+import { NEmpty, NSpin } from 'naive-ui';
+import TheEmpty from '/src/components/TheEmpty';
+
+export default defineComponent({
+  name: 'share-resources',
+  setup() {
+    const state = reactive({
+      searchWord: '',
+      loading: false,
+      pageTotal: 0,
+      pagination: {
+        page: 1,
+        rows: 20
+      },
+      searchGroup: {
+        type: '', //
+        keyword: '',
+        bookVersionId: null,
+        subjectId: null,
+        sourceType: 4
+      },
+      tableList: [] as any
+    });
+    const getList = async () => {
+      try {
+        state.loading = true;
+        const { data } = await materialQueryPage({
+          ...state.searchGroup,
+          ...state.pagination
+        });
+        state.loading = false;
+        state.pageTotal = Number(data.total);
+        state.tableList = data.rows || [];
+      } catch {
+        state.loading = false;
+      }
+    };
+
+    const onSearch = async (item: any) => {
+      state.pagination.page = 1;
+      state.searchGroup = Object.assign(state.searchGroup, item);
+      console.log(item, state.searchGroup);
+      getList();
+    };
+
+    onMounted(() => {
+      getList();
+    });
+    return () => (
+      <>
+        <SearchGroupResources onSearch={(item: any) => onSearch(item)} />
+
+        <NSpin v-model:show={state.loading}>
+          <div class={styles.list}>
+            {state.tableList.map((item: any) => {
+              const tmpItem = {
+                id: item.id,
+                coverImg: item.coverImg,
+                type: item.type,
+                title: item.name,
+                isCollect: !!item.favoriteFlag,
+                isSelected: item.sourceFrom === 'PLATFORM' ? true : false
+              };
+              return <CardType item={tmpItem} />;
+            })}
+
+            {!state.loading && state.tableList.length <= 0 && (
+              <TheEmpty description="暂无收藏资源" />
+            )}
+          </div>
+        </NSpin>
+
+        <Pagination
+          v-model:page={state.pagination.page}
+          v-model:pageSize={state.pagination.rows}
+          v-model:pageTotal={state.pageTotal}
+          onList={getList}
+        />
+      </>
+    );
+  }
+});

src/views/natural-resources/components/my-collect/search-group-resources.tsx

@@ -0,0 +1,89 @@
+import { defineComponent, onMounted, reactive, ref } from 'vue';
+import styles from './index.module.less';
+import { NButton, NForm, NFormItem, NSpace } from 'naive-ui';
+import iconAdd from '../../images/icon-add.svg';
+import TheSearch from '/src/components/TheSearch';
+import { resourceTypeArray } from '/src/utils/searchArray';
+
+export default defineComponent({
+  name: 'search-group',
+  emits: ['search'],
+  setup(props, { emit }) {
+    const resourceList = ref([] as any[]);
+    const forms = reactive({
+      type: '', //
+      keyword: '',
+      bookVersionId: null,
+      subjectId: null
+    });
+
+    const onSearch = () => {
+      emit('search', forms);
+    };
+
+    onMounted(() => {
+      resourceList.value = [
+        {
+          label: '全部',
+          value: ''
+        },
+        ...resourceTypeArray
+      ];
+    });
+    return () => (
+      <div class={styles.searchGroup}>
+        <div class={styles.searchCatatory}>
+          <NSpace size="small" class={styles.btnType}>
+            {resourceList.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>
+        </div>
+        <NForm labelAlign="left" labelPlacement="left">
+          <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>
+
+          <TheSearch
+            class={styles.inputSearch}
+            round
+            onSearch={(val: string) => {
+              forms.keyword = val;
+              onSearch();
+            }}
+          />
+        </NForm>
+      </div>
+    );
+  }
+});

src/views/natural-resources/components/my-resources /index.module.less

@@ -0,0 +1,141 @@
+.list {
+  margin-top: 12px;
+
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: flex-start;
+  gap: 22px;
+}
+
+.searchGroup {
+  position: relative;
+  padding: 0;
+
+
+  .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 {
+    position: absolute;
+    top: 4px;
+    right: 0px;
+    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;
+      }
+    }
+  }
+
+  .searchCatatory {
+    display: flex;
+    justify-content: space-between;
+    padding-bottom: 24px;
+    border-bottom: 1px solid #F2F2F2;
+    margin-bottom: 20px;
+
+    .addTrain {
+      height: 37px;
+      border-radius: 8px;
+      font-size: 18px;
+      background-color: #E8F4FF;
+      color: #0378EC;
+
+      &.error {
+        color: #EC3A4E;
+        background-color: #FDEBED;
+      }
+
+      img {
+        margin-right: 8px;
+      }
+
+      .iconUpload {
+        width: 23px;
+        height: 19px;
+      }
+
+      .iconEdit {
+        width: 24px;
+        height: 25px;
+      }
+
+      .iconSelectAll {
+        width: 20px;
+        height: 20px;
+      }
+
+      .iconDelete {
+        width: 18px;
+        height: 18px;
+      }
+
+      .iconPen {
+        width: 20px;
+        height: 19px;
+      }
+    }
+  }
+}

src/views/natural-resources/components/my-resources /index.tsx

@@ -0,0 +1,88 @@
+import { defineComponent, onMounted, reactive } from 'vue';
+import styles from './index.module.less';
+import CardType from '/src/components/card-type';
+import Pagination from '/src/components/pagination';
+import SearchGroupResources from './search-group-resources';
+import { materialQueryPage } from '../../api';
+import { NEmpty, NSpin } from 'naive-ui';
+import TheEmpty from '/src/components/TheEmpty';
+
+export default defineComponent({
+  name: 'share-resources',
+  setup() {
+    const state = reactive({
+      searchWord: '',
+      loading: false,
+      pageTotal: 0,
+      pagination: {
+        page: 1,
+        rows: 20
+      },
+      searchGroup: {
+        type: '', //
+        keyword: '',
+        bookVersionId: null,
+        subjectId: null,
+        sourceType: 3
+      },
+      tableList: [] as any
+    });
+    const getList = async () => {
+      try {
+        state.loading = true;
+        const { data } = await materialQueryPage({
+          ...state.searchGroup,
+          ...state.pagination
+        });
+        state.loading = false;
+        state.pageTotal = Number(data.total);
+        state.tableList = data.rows || [];
+      } catch {
+        state.loading = false;
+      }
+    };
+
+    const onSearch = async (item: any) => {
+      state.pagination.page = 1;
+      state.searchGroup = Object.assign(state.searchGroup, item);
+      console.log(item, state.searchGroup);
+      getList();
+    };
+
+    onMounted(() => {
+      getList();
+    });
+    return () => (
+      <>
+        <SearchGroupResources onSearch={(item: any) => onSearch(item)} />
+
+        <NSpin v-model:show={state.loading}>
+          <div class={styles.list}>
+            {state.tableList.map((item: any) => {
+              const tmpItem = {
+                id: item.id,
+                coverImg: item.coverImg,
+                type: item.type,
+                title: item.name,
+                isCollect: !!item.favoriteFlag,
+                isSelected: item.sourceFrom === 'PLATFORM' ? true : false
+              };
+              return <CardType item={tmpItem} />;
+            })}
+
+            {!state.loading && state.tableList.length <= 0 && (
+              <TheEmpty description="暂无资源" />
+            )}
+          </div>
+        </NSpin>
+
+        <Pagination
+          v-model:page={state.pagination.page}
+          v-model:pageSize={state.pagination.rows}
+          v-model:pageTotal={state.pageTotal}
+          onList={getList}
+        />
+      </>
+    );
+  }
+});

src/views/natural-resources/components/my-resources /search-group-resources.tsx

@@ -0,0 +1,169 @@
+import { defineComponent, onMounted, reactive, ref } from 'vue';
+import styles from './index.module.less';
+import { NButton, NForm, NFormItem, NSpace } from 'naive-ui';
+import iconUpload from '../../images/icon-upload.svg';
+import iconEdit from '../../images/icon-edit.svg';
+import iconSelectAll from '../../images/icon-selectall.svg';
+import iconSelectAllDefault from '../../images/icon-selectall-default.svg';
+import iconPen from '../../images/icon-pen.svg';
+import iconDelete from '../../images/icon-delete.svg';
+import TheSearch from '/src/components/TheSearch';
+import { resourceTypeArray } from '/src/utils/searchArray';
+
+export default defineComponent({
+  name: 'search-group',
+  emits: ['search', 'upload', 'edit', 'selectAll', 'delete', 'update'],
+  setup(props, { emit }) {
+    const resourceList = ref([] as any[]);
+    const forms = reactive({
+      type: '', //
+      keyword: '',
+      bookVersionId: null,
+      subjectId: null
+    });
+    const state = reactive({
+      isEdit: false, // 是否编辑
+      isSelectAll: false
+    });
+
+    const onSearch = () => {
+      emit('search', forms);
+    };
+
+    onMounted(() => {
+      resourceList.value = [
+        {
+          label: '全部',
+          value: ''
+        },
+        ...resourceTypeArray
+      ];
+    });
+    return () => (
+      <div class={styles.searchGroup}>
+        <div class={styles.searchCatatory}>
+          <NSpace size="small" class={styles.btnType}>
+            {resourceList.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>
+
+          <NSpace>
+            {state.isEdit ? (
+              <>
+                <NButton
+                  type="primary"
+                  class={styles.addTrain}
+                  focusable={false}
+                  strong
+                  onClick={() => {
+                    state.isSelectAll = !state.isSelectAll;
+                    emit('selectAll', state.isSelectAll);
+                  }}>
+                  <img
+                    src={
+                      state.isSelectAll ? iconSelectAll : iconSelectAllDefault
+                    }
+                    class={styles.iconSelectAll}
+                  />
+                  全选
+                </NButton>
+                <NButton
+                  type="error"
+                  class={[styles.addTrain, styles.error]}
+                  focusable={false}
+                  strong
+                  onClick={() => emit('delete')}>
+                  <img src={iconDelete} class={styles.iconDelete} />
+                  删除
+                </NButton>
+                <NButton
+                  type="primary"
+                  class={styles.addTrain}
+                  focusable={false}
+                  strong
+                  onClick={() => emit('update')}>
+                  <img src={iconPen} class={styles.iconPen} />
+                  修改
+                </NButton>
+                <NButton
+                  type="primary"
+                  class={styles.addTrain}
+                  focusable={false}
+                  strong
+                  onClick={() => (state.isEdit = false)}>
+                  完成编辑
+                </NButton>
+              </>
+            ) : (
+              <>
+                <NButton
+                  type="primary"
+                  class={styles.addTrain}
+                  focusable={false}
+                  strong
+                  onClick={() => emit('update')}>
+                  <img src={iconUpload} class={styles.iconUpload} />
+                  上传资源
+                </NButton>
+                <NButton
+                  type="primary"
+                  class={styles.addTrain}
+                  focusable={false}
+                  strong
+                  onClick={() => (state.isEdit = true)}>
+                  <img src={iconEdit} class={styles.iconEdit} />
+                  编辑资源
+                </NButton>
+              </>
+            )}
+          </NSpace>
+        </div>
+        <NForm labelAlign="left" labelPlacement="left">
+          <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>
+
+          <TheSearch
+            class={styles.inputSearch}
+            round
+            onSearch={(val: string) => {
+              forms.keyword = val;
+              onSearch();
+            }}
+          />
+        </NForm>
+      </div>
+    );
+  }
+});

src/views/natural-resources/components/share-resources/index.module.less

@@ -0,0 +1,113 @@
+.list {
+  margin-top: 12px;
+
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: flex-start;
+  gap: 22px;
+}
+
+.searchGroup {
+  position: relative;
+  padding: 0;
+
+
+  .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 {
+    position: absolute;
+    top: 4px;
+    right: 0px;
+    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;
+      }
+    }
+  }
+
+  .searchCatatory {
+    display: flex;
+    justify-content: space-between;
+    padding-bottom: 24px;
+    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;
+      }
+    }
+  }
+}

src/views/natural-resources/components/share-resources/index.tsx

@@ -0,0 +1,88 @@
+import { defineComponent, onMounted, reactive } from 'vue';
+import styles from './index.module.less';
+import CardType from '/src/components/card-type';
+import Pagination from '/src/components/pagination';
+import SearchGroupResources from './search-group-resources';
+import { materialQueryPage } from '../../api';
+import { NEmpty, NSpin } from 'naive-ui';
+import TheEmpty from '/src/components/TheEmpty';
+
+export default defineComponent({
+  name: 'share-resources',
+  setup() {
+    const state = reactive({
+      searchWord: '',
+      loading: false,
+      pageTotal: 0,
+      pagination: {
+        page: 1,
+        rows: 20
+      },
+      searchGroup: {
+        type: '', //
+        keyword: '',
+        bookVersionId: null,
+        subjectId: null,
+        sourceType: 2
+      },
+      tableList: [] as any
+    });
+    const getList = async () => {
+      try {
+        state.loading = true;
+        const { data } = await materialQueryPage({
+          ...state.searchGroup,
+          ...state.pagination
+        });
+        state.loading = false;
+        state.pageTotal = Number(data.total);
+        state.tableList = data.rows || [];
+      } catch {
+        state.loading = false;
+      }
+    };
+
+    const onSearch = async (item: any) => {
+      state.pagination.page = 1;
+      state.searchGroup = Object.assign(state.searchGroup, item);
+      console.log(item, state.searchGroup);
+      getList();
+    };
+
+    onMounted(() => {
+      getList();
+    });
+    return () => (
+      <>
+        <SearchGroupResources onSearch={(item: any) => onSearch(item)} />
+
+        <NSpin v-model:show={state.loading}>
+          <div class={styles.list}>
+            {state.tableList.map((item: any) => {
+              const tmpItem = {
+                id: item.id,
+                coverImg: item.coverImg,
+                type: item.type,
+                title: item.name,
+                isCollect: !!item.favoriteFlag,
+                isSelected: item.sourceFrom === 'PLATFORM' ? true : false
+              };
+              return <CardType item={tmpItem} />;
+            })}
+
+            {!state.loading && state.tableList.length <= 0 && (
+              <TheEmpty description="暂无共享资源" />
+            )}
+          </div>
+        </NSpin>
+
+        <Pagination
+          v-model:page={state.pagination.page}
+          v-model:pageSize={state.pagination.rows}
+          v-model:pageTotal={state.pageTotal}
+          onList={getList}
+        />
+      </>
+    );
+  }
+});

src/views/natural-resources/search-group-resources.tsx → src/views/natural-resources/components/share-resources/search-group-resources.tsx

@@ -1,34 +1,53 @@
-import { defineComponent, reactive } from 'vue';
+import { defineComponent, onMounted, reactive, ref } from 'vue';
 import styles from './index.module.less';
-import { NButton, NForm, NFormItem, NInput, NSpace } from 'naive-ui';
-import iconAdd from './images/icon-add.svg';
+import { NButton, NForm, NFormItem, NSpace } from 'naive-ui';
+import iconAdd from '../../images/icon-add.svg';
 import TheSearch from '/src/components/TheSearch';
+import { resourceTypeArray } from '/src/utils/searchArray';
 
 export default defineComponent({
   name: 'search-group',
-  setup() {
+  emits: ['search'],
+  setup(props, { emit }) {
+    const resourceList = ref([] as any[]);
     const forms = reactive({
-      search: ''
+      type: '', //
+      keyword: '',
+      bookVersionId: null,
+      subjectId: null
+    });
+
+    const onSearch = () => {
+      emit('search', forms);
+    };
+
+    onMounted(() => {
+      resourceList.value = [
+        {
+          label: '全部',
+          value: ''
+        },
+        ...resourceTypeArray
+      ];
     });
     return () => (
       <div class={styles.searchGroup}>
         <div class={styles.searchCatatory}>
           <NSpace size="small" class={styles.btnType}>
-            <NButton type="primary" round size="small" focusable={false}>
-              全部
-            </NButton>
-            <NButton secondary round size="small" focusable={false}>
-              乐谱
-            </NButton>
-            <NButton secondary round size="small" focusable={false}>
-              图片
-            </NButton>
-            <NButton secondary round size="small" focusable={false}>
-              音频
-            </NButton>
-            <NButton secondary round size="small" focusable={false}>
-              视频
-            </NButton>
+            {resourceList.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>
 
           <NButton
@@ -83,27 +102,14 @@ export default defineComponent({
             </NSpace>
           </NFormItem>
 
-          {/* <NInput
-            type="text"
-            placeholder="请输入搜索关键词"
-            clearable
+          <TheSearch
+            class={styles.inputSearch}
             round
-            v-model:value={forms.search}
-            class={styles.inputSearch}>
-            {{
-              prefix: () => <span class={'icon-search-input'}></span>,
-              suffix: () => (
-                <NButton
-                  round
-                  size="small"
-                  type="primary"
-                  class={styles.searchBtn}>
-                  搜索
-                </NButton>
-              )
+            onSearch={(val: string) => {
+              forms.keyword = val;
+              onSearch();
             }}
-          </NInput> */}
-          <TheSearch class={styles.inputSearch} round />
+          />
         </NForm>
       </div>
     );

src/views/natural-resources/images/icon-delete.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>切片</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="39、我的资源-编辑资源" transform="translate(-1514.000000, -200.000000)" stroke="#EC3A4E" stroke-width="1.6">
+            <g id="编组-43备份-5" transform="translate(1500.000000, 190.000000)">
+                <g id="删除" transform="translate(14.000000, 10.000000)">
+                    <g id="编组" transform="translate(1.000000, 1.000000)">
+                        <line x1="9.91156364" y1="6.57389091" x2="9.91156364" y2="12.3637091" id="Stroke-1"></line>
+                        <line x1="6.01810909" y1="6.57389091" x2="6.01810909" y2="12.3637091" id="Stroke-2"></line>
+                        <g>
+                            <path d="M13.8181818,5.81818182 L13.8181818,14.7272727 C13.8181818,15.4305455 13.1665455,16 12.3636364,16 L3.63636364,16 C2.83345455,16 2.18181818,15.4305455 2.18181818,14.7272727 L2.18181818,5.81818182" id="Stroke-3"></path>
+                            <line x1="0" y1="3.63636364" x2="16" y2="3.63636364" id="Stroke-5"></line>
+                            <path d="M10.9090909,0 L5.09090909,0 C4.288,0 3.63636364,0.651636364 3.63636364,1.45454545 L3.63636364,3.63636364 L12.3636364,3.63636364 L12.3636364,1.45454545 C12.3636364,0.651636364 11.712,0 10.9090909,0 Z" id="Stroke-7"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/views/natural-resources/images/icon-edit.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="25px" viewBox="0 0 24 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>切片</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="38、我的资源" transform="translate(-1740.000000, -196.000000)" stroke="#0378EC" stroke-width="1.75000633">
+            <g id="编组-43备份-4" transform="translate(1728.000000, 190.000000)">
+                <g id="图标/通用/返回备份" transform="translate(12.000000, 6.500000)">
+                    <g id="编组" transform="translate(4.500000, 3.500000)">
+                        <path d="M14.9996818,12.0790752 L14.9998707,14.999512 C14.999809,16.1040295 14.1045175,16.9994964 13,16.9997744 L11.2810163,17 L11.2810163,17" id="Stroke-1" stroke-linejoin="round"></path>
+                        <path d="M14.9996818,5.1006263 L14.9996818,2 C14.9996818,0.8954305 14.1042513,7.78148667e-16 12.9996818,0 L2,0 C0.8954305,2.02906125e-16 7.52907669e-16,0.8954305 0,2 L0,14.999512 C1.11632554e-15,16.1040815 0.8954305,16.999512 2,16.999512 L4.49992046,16.999512 L4.49992046,16.999512" id="Stroke-3" stroke-linejoin="round"></path>
+                        <g id="编组-2" transform="translate(4.000000, 3.067647)">
+                            <line x1="0" y1="1.406688" x2="7.00023863" y2="1.432353" id="Stroke-5"></line>
+                            <line x1="0" y1="5.98505436" x2="3.49992046" y2="5.98505436" id="Stroke-9"></line>
+                        </g>
+                        <line x1="7.56266903" y1="16.9998373" x2="15" y2="7.60534456" id="Stroke-7"></line>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/views/natural-resources/images/icon-pen.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="19px" viewBox="0 0 20 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>修改、修改资料</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="39、我的资源-编辑资源" transform="translate(-1633.000000, -199.000000)" fill="#0378EC" fill-rule="nonzero" stroke="#0378EC" stroke-width="0.53388713">
+            <g id="资源/未全选备份" transform="translate(1620.000000, 190.000000)">
+                <g id="修改、修改资料" transform="translate(14.000000, 9.500000)">
+                    <path d="M17.9046486,17.6523845 C17.7667785,17.8701226 17.5261098,18.001517 17.2679882,17.9999727 L0.735839522,17.9999727 C0.478306804,18.002166 0.237766691,17.8719739 0.0991791192,17.6553809 C-0.0330597064,17.4456805 -0.0330597064,17.1788942 0.0991791192,16.9691937 C0.2371398,16.7511671 0.477420533,16.6188537 0.735839522,16.618609 L17.2529726,16.618609 C17.5115687,16.6153773 17.7534813,16.7456975 17.8926361,16.9632008 C18.0313104,17.1708363 18.036003,17.4400632 17.9046486,17.6523845 L17.9046486,17.6523845 Z M9.47190136,12.3067167 C8.69957458,13.0087162 7.72999048,13.4573957 6.69401989,13.592194 L4.89215083,13.7390201 C4.02425056,13.8109349 3.54675526,13.8499 3.45666181,13.8499 C3.27227515,13.8509365 3.09505661,13.7786969 2.96415093,13.6491266 C2.72690484,13.4154034 2.72690484,13.4154034 2.86805125,11.7284018 L3.018207,9.93053146 C3.15330513,8.89685992 3.60298251,7.92942755 4.30654338,7.15881473 L10.9133966,0.581605828 C11.7335281,-0.193868609 13.0182992,-0.193868609 13.8384307,0.581605828 L16.0697453,2.80796857 C16.8743216,3.61169291 16.8743216,4.91379768 16.0697453,5.71752203 L9.47190136,12.3067167 Z M15.0937328,3.78181499 L12.8624183,1.55545225 C12.5917977,1.29205335 12.1600297,1.29205335 11.889409,1.55545225 L5.28255579,8.1476434 C4.80000171,8.68355634 4.48661165,9.34959577 4.38162126,10.0623753 L4.2314655,11.8602456 L4.18341566,12.4385606 L4.76301688,12.3906173 L6.56488594,12.2407948 C7.27888888,12.1348399 7.94607934,11.8223 8.48387649,11.3418597 L15.0907297,4.76764721 C15.3547145,4.49762713 15.3547145,4.06681732 15.0907297,3.79679724 L15.0937328,3.78181499 Z" id="形状"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/views/natural-resources/images/icon-selectall-default.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 2</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="39、我的资源-编辑资源" transform="translate(-1394.000000, -148.000000)" stroke="#0378EC" stroke-width="1.6">
+            <g id="资源/未全选备份-2" transform="translate(1380.000000, 139.000000)">
+                <g id="编组-2" transform="translate(14.000000, 9.000000)">
+                    <circle id="椭圆形" cx="10" cy="10" r="9.2"></circle>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/views/natural-resources/images/icon-selectall.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 2</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="39、我的资源-编辑资源" transform="translate(-1394.000000, -199.000000)" stroke="#0378EC">
+            <g id="资源/未全选" transform="translate(1380.000000, 190.000000)">
+                <g id="编组-2" transform="translate(14.000000, 9.000000)">
+                    <circle id="椭圆形" stroke-width="1.6" cx="10" cy="10" r="9.2"></circle>
+                    <path d="M15.4726021,6.3528344 L9.53298784,14.6176351 C9.17480598,15.1186179 8.43305929,15.1186179 8.07487742,14.6176351 L4.55792636,9.72668455 C4.45075384,9.57667276 4.55792636,9.36722233 4.74124779,9.36722233 L6.06398239,9.36722233 C6.35165601,9.36722233 6.62522799,9.50591248 6.79444777,9.74366702 L8.80252247,12.5401133 L13.2360807,6.36981687 C13.4053004,6.13489274 13.6760521,5.99337218 13.966546,5.99337218 L15.2892806,5.99337218 C15.4726021,5.99337218 15.5797746,6.20282261 15.4726021,6.3528344 Z" id="Path" stroke-width="0.4" fill="#0378EC"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/views/natural-resources/images/icon-upload.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="23px" height="19px" viewBox="0 0 23 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="38、我的资源" transform="translate(-1579.000000, -199.000000)" stroke="#0378EC" stroke-width="1.75">
+            <g id="编组-43备份-3" transform="translate(1568.000000, 190.000000)">
+                <g id="编组" transform="translate(12.000000, 10.000000)">
+                    <path d="M4.058,6.4426 C1.731,6.9926 0,9.0706 0,11.5496 C0,14.4496 2.367,16.7996 5.286,16.7996 C5.786,16.7996 6.271,16.7306 6.73,16.6016" id="Stroke-1"></path>
+                    <path d="M16.9423,6.4426 C19.2693,6.9926 21.0003,9.0706 21.0003,11.5496 C21.0003,14.4496 18.6333,16.7996 15.7143,16.7996 C15.2143,16.7996 14.7293,16.7306 14.2703,16.6016" id="Stroke-3"></path>
+                    <path d="M16.9135,6.3 C16.9135,2.821 14.0735,0 10.5705,0 C7.0675,0 4.2285,2.821 4.2285,6.3" id="Stroke-5"></path>
+                    <polyline id="Stroke-7" points="6.9056 10.4377 10.5706 6.7857 14.3406 10.4997"></polyline>
+                    <line x1="10.5707" y1="15.7502" x2="10.5707" y2="8.6432" id="Stroke-9"></line>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/views/natural-resources/index.tsx

@@ -1,137 +1,36 @@
-import { defineComponent, reactive } from 'vue';
+import { defineComponent } from 'vue';
 import styles from './index.module.less';
-import Pagination from '@/components/pagination';
 import { NTabPane, NTabs } from 'naive-ui';
-import CardType from '/src/components/card-type';
-import SearchGroupResources from './search-group-resources';
-import listData from '../xiaoku-music/data.json';
+import ShareResources from './components/share-resources';
+import MyResources from './components/my-resources ';
+import MyCollect from './components/my-collect';
 export default defineComponent({
   name: 'student-studentList',
   setup() {
-    const state = reactive({
-      searchWord: '',
-      loading: false,
-      pagination: {
-        page: 1,
-        rows: 50,
-        pageTotal: 0
-      },
-      tableList: [] as any
-    });
-    const forms = reactive({
-      list: [],
-      height: '100%' as any
-    });
-    const formatData = () => {
-      const rows = listData.rows || [];
-      const tempList: any = [];
-      rows.forEach((row: any, i: number) => {
-        tempList.push({
-          id: row.id,
-          type: 'SONG',
-          title: row.musicSheetName,
-          url: row.fixedTone ? row.fixedTone.split(',')[0] : '',
-          isCollect: i % 3 ? false : true,
-          isSelected: i % 4 ? false : true
-        });
-
-        if (i === 2 || i === 12) {
-          tempList.push({
-            id: i + 3,
-            type: 'VIDEO',
-            title: '其多列',
-            url: 'https://gyt.ks3-cn-beijing.ksyuncs.com/courseware/1687844640957.png',
-            isCollect: i % 3 ? false : true,
-            isSelected: i % 4 ? false : true
-          });
-        }
-
-        if (i === 0 || i === 6) {
-          tempList.push({
-            id: i + 3,
-            type: 'AUDIO',
-            title: '歌曲表演 大鹿',
-            url: 'https://gyt.ks3-cn-beijing.ksyuncs.com/courseware/1687916228530.png',
-            isCollect: i % 3 ? false : true,
-            isSelected: i % 4 ? false : true
-          });
-        }
-
-        if (i === 5 || i === 15) {
-          tempList.push({
-            id: i + 3,
-            type: 'IMG',
-            title: '其多列',
-            url: 'https://gyt.ks3-cn-beijing.ksyuncs.com/courseware/1688007481564.jpg',
-            isCollect: i % 3 ? false : true,
-            isSelected: i % 4 ? false : true
-          });
-        }
-      });
-
-      forms.list = tempList || [];
-      // state.pagination.pageTotal = tempList.length;
-      state.pagination.rows = tempList.length;
-    };
-    const getList = () => {
-      console.log('getList');
-    };
-
-    formatData();
     return () => (
       <div class={styles.listWrap}>
         <NTabs
-          defaultValue="shareResources"
+          defaultValue="myResources"
           paneClass={styles.paneTitle}
           justifyContent="center"
           paneWrapperClass={styles.paneWrapperContainer}>
-          <NTabPane name="shareResources" tab="共享资源">
-            <SearchGroupResources />
-
-            <div class={styles.list}>
-              {forms.list.map((item: any) => (
-                <CardType item={item} />
-              ))}
-            </div>
-
-            <Pagination
-              v-model:page={state.pagination.page}
-              v-model:pageSize={state.pagination.rows}
-              v-model:pageTotal={state.pagination.pageTotal}
-              onList={getList}
-            />
+          <NTabPane
+            name="shareResources"
+            tab="共享资源"
+            displayDirective="show:lazy">
+            <ShareResources />
           </NTabPane>
-          <NTabPane name="myResources" tab="我的资源">
-            <SearchGroupResources />
-
-            <div class={styles.list}>
-              {forms.list.map((item: any) => (
-                <CardType item={item} />
-              ))}
-            </div>
-
-            <Pagination
-              v-model:page={state.pagination.page}
-              v-model:pageSize={state.pagination.rows}
-              v-model:pageTotal={state.pagination.pageTotal}
-              onList={getList}
-            />
+          <NTabPane
+            name="myResources"
+            tab="我的资源"
+            displayDirective="show:lazy">
+            <MyResources />
           </NTabPane>
-          <NTabPane name="myCollect" tab="我的收藏">
-            <SearchGroupResources />
-
-            <div class={styles.list}>
-              {forms.list.map((item: any) => (
-                <CardType item={item} />
-              ))}
-            </div>
-
-            <Pagination
-              v-model:page={state.pagination.page}
-              v-model:pageSize={state.pagination.rows}
-              v-model:pageTotal={state.pagination.pageTotal}
-              onList={getList}
-            />
+          <NTabPane
+            name="myCollect"
+            tab="我的收藏"
+            displayDirective="show:lazy">
+            <MyCollect />
           </NTabPane>
         </NTabs>
       </div>

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

@@ -22,7 +22,7 @@ export default defineComponent({
           id: '5',
           name: '歌曲表演 大鹿',
           title: '歌曲表演 大鹿',
-          type: 'AUDIO',
+          type: 'SONG',
           content:
             'https://cloud-coach.ks3-cn-beijing.ksyuncs.com/1686819360752.mp3',
           url: 'https://gyt.ks3-cn-beijing.ksyuncs.com/courseware/1687916228530.png'
@@ -40,7 +40,7 @@ export default defineComponent({
           id: '4',
           name: '歌曲 其多列',
           title: '其多列',
-          type: 'SONG',
+          type: 'MUSIC',
           content: '43541',
           url: 'https://cloud-coach.ks3-cn-beijing.ksyuncs.com/music-sheet-first/1687847690372-1.png'
         }

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

@@ -46,7 +46,7 @@ export default defineComponent({
           id: '4',
           name: '彩虹岛',
           title: '彩虹岛',
-          type: 'SONG',
+          type: 'MUSIC',
           content: '22078',
           url: 'https://cloud-coach.ks3-cn-beijing.ksyuncs.com/music-sheet-fixed/1675770786664-1.png'
         }

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

@@ -22,7 +22,7 @@ export default defineComponent({
         if (i <= 10) {
           tempList.push({
             id: row.id,
-            type: 'SONG',
+            type: 'MUSIC',
             title: row.musicSheetName,
             url: row.fixedTone ? row.fixedTone.split(',')[0] : '',
             isCollect: i % 3 ? false : true,