乐理资源 弹窗选择

.env.devProd

@@ -6,3 +6,6 @@ VITE_YJL_URL = "https://test.kt.colexiu.com/instrument"
 
 ## 移动端app地址
 VITE_CLASSAPP_URL = "https://test.kt.colexiu.com/classroom-app"
+
+## 老师端地址
+VITE_CLASSROOM_URL = "https://test.kt.colexiu.com/classroom"

.env.development

@@ -6,3 +6,6 @@ VITE_YJL_URL = "https://test.kt.colexiu.com/instrument"
 
 ## 移动端app地址
 VITE_CLASSAPP_URL = "https://test.kt.colexiu.com/classroom-app"
+
+## 老师端地址
+VITE_CLASSROOM_URL = "https://test.kt.colexiu.com/classroom"

.env.production

@@ -5,4 +5,7 @@ VITE_APP_URL = "https://kt.colexiu.com"
 VITE_YJL_URL = "https://mec.colexiu.com/instrument"
 
 ## 移动端app地址
-VITE_CLASSAPP_URL = "https://mec.colexiu.com/classroom-app"
+VITE_CLASSAPP_URL = "https://kt.colexiu.com/classroom-app"
+
+## 老师端地址
+VITE_CLASSROOM_URL = "https://kt.colexiu.com/classroom"

.env.staging

@@ -6,3 +6,6 @@ VITE_YJL_URL = "https://test.kt.colexiu.com/instrument"
 
 ## 移动端app地址
 VITE_CLASSAPP_URL = "https://test.kt.colexiu.com/classroom-app"
+
+## 老师端地址
+VITE_CLASSROOM_URL = "https://test.kt.colexiu.com/classroom"

src/api/musicResources.ts

@@ -0,0 +1,47 @@
+import { httpAxios } from "@/api/ApiInstance"
+
+/**
+ * 获取乐理知识 旁边的列表
+ */
+
+export const getListKnowledge = () => {
+  return httpAxios.axioseRquest({
+    method: "post",
+    url: "/edu-app/lessonCoursewareDetail/listKnowledge",
+    data: {
+      type: "COURSEWARE"
+    }
+  })
+}
+
+/**
+ * 获取查询配置
+ */
+
+export const getKnowledgeWikiCategoryType = (type: "MUSIC" | "INSTRUMENT" | "MUSICIAN") => {
+  return httpAxios.axioseRquest({
+    method: "post",
+    url: "/edu-app/knowledgeWikiCategoryType/page",
+    data: {
+      page: 1,
+      rows: 99,
+      type
+    }
+  })
+}
+
+/**
+ * 获取查询配置
+ */
+
+export const getKnowledgeWikiPage = (
+  data: { page: number; rows: number; type: string; wikiCategoryId: string },
+  abortController: AbortController
+) => {
+  return httpAxios.axioseRquest({
+    signal: abortController.signal,
+    method: "post",
+    url: "/edu-app/knowledgeWiki/page",
+    data
+  })
+}

src/api/pptOperate.ts

@@ -1,5 +1,5 @@
 import { httpAxios } from "@/api/ApiInstance"
-import { type queryParamsType } from "@/queryParams/"
+import { type queryParamsType } from "@/queryParams"
 
 //根据id获取课程信息
 export const getTeacherChapterKnowledgeMaterial = (id: string, fromType: queryParamsType["fromType"]) => {

src/components/Popover.vue

@@ -102,6 +102,8 @@ onMounted(() => {
   font-size: 14px;
   color: #333333;
   line-height: 20px;
+  max-height: 400px;
+  overflow-y: auto;
 }
 </style>
 

src/config/index.ts

@@ -3,3 +3,5 @@ export const URL_API = import.meta.env.VITE_APP_URL as string
 export const YJL_URL_API = import.meta.env.VITE_YJL_URL as string
 
 export const CLASSAPP_URL_API = import.meta.env.VITE_CLASSAPP_URL as string
+
+export const CLASSROOM_URL_API = import.meta.env.VITE_CLASSROOM_URL as string

src/libs/cipher.ts

@@ -0,0 +1,21 @@
+import { encrypt, decrypt } from "crypto-js/aes"
+import { parse } from "crypto-js/enc-utf8"
+import pkcs7 from "crypto-js/pad-pkcs7"
+import ECB from "crypto-js/mode-ecb"
+import UTF8 from "crypto-js/enc-utf8"
+// 注意 key 和 iv 至少都需要 16 位
+const AES_KEY = "1111111111000000"
+const AES_IV = "0000001111111111"
+
+/**
+ *
+ * @description 加密:反序列化字符串参数
+ */
+
+export function stringifyQuery(query: string) {
+  return `?${encrypt(query, parse(AES_KEY), {
+    mode: ECB,
+    padding: pkcs7,
+    iv: parse(AES_IV)
+  }).toString()}`
+}

src/views/Editor/CanvasTool/index.vue

@@ -91,6 +91,61 @@
                 <div class="tit">节奏练习</div>
               </div>
             </PopoverMenuItem>
+            <PopoverMenuItem
+              @click="
+                () => {
+                  expandedKnowledgeVisible = false
+                  musicResourcesVisible = true
+                  musicResourcesType = 'INSTRUMENT'
+                }
+              "
+            >
+              <div class="menuItem">
+                <img src="./imgs/yqbk.png" alt="" />
+                <div class="tit">乐器百科</div>
+              </div>
+            </PopoverMenuItem>
+            <PopoverMenuItem
+              @click="
+                () => {
+                  expandedKnowledgeVisible = false
+                  musicResourcesVisible = true
+                  musicResourcesType = 'MUSIC'
+                }
+              "
+            >
+              <div class="menuItem">
+                <img src="./imgs/mqjs.png" alt="" />
+                <div class="tit">名曲鉴赏</div>
+              </div>
+            </PopoverMenuItem>
+            <PopoverMenuItem
+              @click="
+                () => {
+                  expandedKnowledgeVisible = false
+                  musicResourcesVisible = true
+                  musicResourcesType = 'MUSICIAN'
+                }
+              "
+            >
+              <div class="menuItem">
+                <img src="./imgs/yyj.png" alt="" />
+                <div class="tit">音乐家</div>
+              </div>
+            </PopoverMenuItem>
+            <PopoverMenuItem
+              @click="
+                () => {
+                  expandedKnowledgeVisible = false
+                  musicTheoryVisible = true
+                }
+              "
+            >
+              <div class="menuItem">
+                <img src="./imgs/ylzs.png" alt="" />
+                <div class="tit">乐理知识</div>
+              </div>
+            </PopoverMenuItem>
           </template>
           <div class="tit">扩展知识</div>
         </Popover>
@@ -333,6 +388,49 @@
         "
       />
     </Modal>
+    <Modal
+      :contentStyle="{
+        width: '70%',
+        minWidth: '1200px',
+        height: '86%',
+        boxShadow: '0px 2px 10px 0px rgba(0,0,0,0.08)',
+        borderRadius: '16px',
+        border: '1px solid #DEDEDE',
+        padding: '0'
+      }"
+      v-model:visible="musicTheoryVisible"
+    >
+      <musicTheoryList
+        @update="handleAddMusicResources"
+        @close="
+          () => {
+            musicTheoryVisible = false
+          }
+        "
+      />
+    </Modal>
+    <Modal
+      :contentStyle="{
+        width: musicResourcesType === 'MUSIC' ? '70%' : '1100px',
+        minWidth: '1100px',
+        height: '86%',
+        boxShadow: '0px 2px 10px 0px rgba(0,0,0,0.08)',
+        borderRadius: '16px',
+        border: '1px solid #DEDEDE',
+        padding: '0'
+      }"
+      v-model:visible="musicResourcesVisible"
+    >
+      <musicResourcesList
+        :type="musicResourcesType"
+        @update="handleAddMusicResources"
+        @close="
+          () => {
+            musicResourcesVisible = false
+          }
+        "
+      />
+    </Modal>
   </div>
 </template>
 
@@ -362,6 +460,8 @@ import cloudCoachList from "@/views/components/element/cloudCoachElement/cloudCo
 import resourcesList from "@/views/components/element/enjoyElement/resourcesList"
 import listeningPracticeList from "@/views/components/element/listeningPracticeElement/listeningPracticeList"
 import rhythmPracticeList from "@/views/components/element/rhythmPracticeElement/rhythmPracticeList"
+import musicTheoryList from "@/views/components/element/musicResourcesElement/musicTheoryList"
+import musicResourcesList from "@/views/components/element/musicResourcesElement/musicResourcesList"
 import fileUpload from "@/utils/oss-file-upload"
 import usePptWork from "@/store/pptWork"
 
@@ -418,6 +518,9 @@ const moreToolsVisible = ref(false)
 const expandedKnowledgeVisible = ref(false)
 const listeningPracticeVisible = ref(false)
 const rhythmPracticeVisible = ref(false)
+const musicTheoryVisible = ref(false)
+const musicResourcesVisible = ref(false)
+const musicResourcesType = ref<"MUSIC" | "INSTRUMENT" | "MUSICIAN">("INSTRUMENT")
 
 // 音视频
 function handleUpload(fileData: UploadRequestOptions) {
@@ -507,6 +610,14 @@ function handleResources(item: Record<string, any>) {
     resourcesListVisible.value = false
   }
 }
+
+// 音乐知识
+function handleAddMusicResources(item: Record<string, any>, type: string) {
+  console.log(item, type, "添加")
+  musicTheoryVisible.value = false
+  musicResourcesVisible.value = false
+}
+
 // 绘制文字范围
 const drawText = (vertical = false) => {
   mainStore.setCreatingElement({

src/views/components/element/enjoyElement/resourcesList/resourcesList.vue

@@ -696,7 +696,7 @@ const highlightedText = (text: string, query: string) => {
               flex-direction: column;
               overflow: hidden;
               cursor: pointer;
-              &:nth-last-child(-n + 3) {
+              &:nth-last-child(-n + 4) {
                 margin-bottom: 0;
               }
               &:hover {

src/views/components/element/musicResourcesElement/index.ts

@@ -0,0 +1,20 @@
+import { getToken } from "@/libs/auth"
+import { stringifyQuery } from "@/libs/cipher"
+import { CLASSROOM_URL_API } from "@/config"
+
+type pptContentType = "INSTRUMENT" | "MUSICIAN" | "MUSIC" | "THEORY"
+type pptType = "modal" | "preview"
+
+const typeObj = {
+  MUSIC: "MUSIC_WIKI",
+  INSTRUMENT: "INSTRUMENT",
+  MUSICIAN: "MUSICIAN",
+  THEORY: "THEORY"
+}
+/**
+ * 获取资源url
+ */
+export function getMusicResourcesUrl(pptContentType: pptContentType, pptType: pptType, pptId: string) {
+  //return `${CLASSROOM_URL_API}/#/pptResources?${stringifyQuery(`Authorization=${getToken()}&source=admin&pptContentType=${pptContentType}&pptType=${pptType}&pptId=${pptId}`)}`
+  return `http://localhost:5005/#/pptResources?${stringifyQuery(`Authorization=${getToken()}&source=admin&pptContentType=${typeObj[pptContentType]}&pptType=${pptType}&pptId=${pptId}`)}`
+}

src/views/components/element/musicResourcesElement/musicResourcesList/components/instrumentList.vue

@@ -0,0 +1,94 @@
+<!--
+* 乐器百科 列表
+-->
+<template>
+  <div class="musicListBox">
+    <div class="musicCon" v-for="item in musicList" :key="item.id" @click="emits('handlePreview', item)">
+      <img class="avatar" :src="item.avatar || icon_default" alt="" />
+      <div class="addBtn" @click.stop="emits('handleAdd', item)">添加</div>
+      <div class="highName">
+        <EllipsisScroll :title="item.highName || ''" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import EllipsisScroll from "@/components/ellipsisScroll"
+import icon_default from "../imgs/icon_default.png"
+
+const props = defineProps<{
+  musicList: any[]
+}>()
+
+const emits = defineEmits<{
+  (event: "handlePreview", item: Record<string, any>): void
+  (event: "handleAdd", item: Record<string, any>): void
+}>()
+</script>
+
+<style lang="scss" scoped>
+.musicListBox {
+  width: calc(100% + 40px);
+  margin-left: -40px;
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0 30px;
+  .musicCon {
+    width: calc(16.6666% - 40px);
+    margin-left: 40px;
+    margin-bottom: 32px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    border-radius: 12px;
+    cursor: pointer;
+    position: relative;
+    &:nth-last-child(-n + 6) {
+      margin-bottom: 0;
+    }
+    &:hover {
+      .avatar {
+        border-color: #198cfe;
+        transform: scale(1.02);
+        transition: all 0.2s ease;
+      }
+    }
+    .highName {
+      text-align: center;
+      width: 100%;
+      margin-top: 12px;
+      overflow: hidden;
+      font-weight: 600;
+      font-size: 14px;
+      color: #131415;
+      line-height: 20px;
+      &::v-deep(.highlighted) {
+        color: $themeColor;
+      }
+    }
+    .avatar {
+      box-sizing: initial;
+      border: 2px solid transparent;
+      width: 140px;
+      height: 140px;
+      border-radius: 12px;
+    }
+    .addBtn {
+      top: 6px;
+      right: 6px;
+      position: absolute;
+      font-weight: 600;
+      font-size: 12px;
+      color: #ffffff;
+      line-height: 18px;
+      padding: 2px 10px;
+      background: #198cfe;
+      border-radius: 4px;
+      &:hover {
+        opacity: 0.8;
+      }
+    }
+  }
+}
+</style>

src/views/components/element/musicResourcesElement/musicResourcesList/components/musicList.vue

@@ -0,0 +1,90 @@
+<!--
+* 名曲鉴赏 列表
+-->
+<template>
+  <div class="musicListBox">
+    <div class="musicCon" v-for="item in musicList" :key="item.id" @click="emits('handlePreview', item)">
+      <img class="avatar" :src="item.avatar || icon_default" alt="" />
+      <div class="highName">
+        <EllipsisScroll :title="item.highName || ''" />
+      </div>
+      <div class="addBtn" @click.stop="emits('handleAdd', item)">添加</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import EllipsisScroll from "@/components/ellipsisScroll"
+import icon_default from "../imgs/icon_default.png"
+
+const props = defineProps<{
+  musicList: any[]
+}>()
+
+const emits = defineEmits<{
+  (event: "handlePreview", item: Record<string, any>): void
+  (event: "handleAdd", item: Record<string, any>): void
+}>()
+</script>
+
+<style lang="scss" scoped>
+.musicListBox {
+  width: calc(100% + 24px);
+  margin-left: -24px;
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0 30px;
+  .musicCon {
+    width: calc(33.3333% - 24px);
+    margin-left: 24px;
+    margin-bottom: 24px;
+    padding: 16px;
+    display: flex;
+    align-items: center;
+    background: #f5f6fa;
+    border-radius: 12px;
+    cursor: pointer;
+    border: 2px solid transparent;
+    &:hover {
+      border-color: #198cfe;
+      transform: scale(1.02);
+      transition: all 0.2s ease;
+    }
+    &:nth-last-child(-n + 3) {
+      margin-bottom: 0;
+    }
+    .highName {
+      overflow: hidden;
+      flex-grow: 1;
+      font-weight: 600;
+      font-size: 15px;
+      color: #131415;
+      line-height: 21px;
+      &::v-deep(.highlighted) {
+        color: $themeColor;
+      }
+    }
+    .avatar {
+      flex-shrink: 0;
+      width: 60px;
+      height: 60px;
+      border-radius: 7px;
+      margin-right: 12px;
+    }
+    .addBtn {
+      margin-left: 20px;
+      flex-shrink: 0;
+      font-weight: 600;
+      font-size: 13px;
+      color: #ffffff;
+      line-height: 19px;
+      padding: 4px 12px;
+      background: #198cfe;
+      border-radius: 4px;
+      &:hover {
+        opacity: 0.8;
+      }
+    }
+  }
+}
+</style>

src/views/components/element/musicResourcesElement/musicResourcesList/components/musicianList.vue

@@ -0,0 +1,94 @@
+<!--
+* 音乐家 列表
+-->
+<template>
+  <div class="musicListBox">
+    <div class="musicCon" v-for="item in musicList" :key="item.id" @click="emits('handlePreview', item)">
+      <img class="avatar" :src="item.avatar || icon_default" alt="" />
+      <div class="addBtn" @click.stop="emits('handleAdd', item)">添加</div>
+      <div class="highName">
+        <EllipsisScroll :title="item.highName || ''" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import EllipsisScroll from "@/components/ellipsisScroll"
+import icon_default from "../imgs/icon_default.png"
+
+const props = defineProps<{
+  musicList: any[]
+}>()
+
+const emits = defineEmits<{
+  (event: "handlePreview", item: Record<string, any>): void
+  (event: "handleAdd", item: Record<string, any>): void
+}>()
+</script>
+
+<style lang="scss" scoped>
+.musicListBox {
+  width: calc(100% + 40px);
+  margin-left: -40px;
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0 30px;
+  .musicCon {
+    width: calc(16.6666% - 40px);
+    margin-left: 40px;
+    margin-bottom: 32px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    border-radius: 12px;
+    cursor: pointer;
+    position: relative;
+    &:nth-last-child(-n + 6) {
+      margin-bottom: 0;
+    }
+    &:hover {
+      .avatar {
+        border-color: #198cfe;
+        transform: scale(1.02);
+        transition: all 0.2s ease;
+      }
+    }
+    .highName {
+      text-align: center;
+      width: 100%;
+      margin-top: 12px;
+      overflow: hidden;
+      font-weight: 600;
+      font-size: 14px;
+      color: #131415;
+      line-height: 20px;
+      &::v-deep(.highlighted) {
+        color: $themeColor;
+      }
+    }
+    .avatar {
+      box-sizing: initial;
+      border: 2px solid transparent;
+      width: 140px;
+      height: 160px;
+      border-radius: 12px;
+    }
+    .addBtn {
+      top: 6px;
+      right: 6px;
+      position: absolute;
+      font-weight: 600;
+      font-size: 12px;
+      color: #ffffff;
+      line-height: 18px;
+      padding: 2px 10px;
+      background: #198cfe;
+      border-radius: 4px;
+      &:hover {
+        opacity: 0.8;
+      }
+    }
+  }
+}
+</style>

src/views/components/element/musicResourcesElement/musicResourcesList/index.ts

@@ -0,0 +1,2 @@
+import musicResourcesList from "./musicResourcesList.vue"
+export default musicResourcesList

src/views/components/element/musicResourcesElement/musicResourcesList/musicPreview.vue

@@ -0,0 +1,81 @@
+<!-- 预览 弹窗列表 -->
+<template>
+  <div class="musicPreview">
+    <div class="headCon">
+      <div class="headLeft">
+        <div class="title">{{ musicObj.name }}</div>
+      </div>
+      <div class="headright">
+        <img @click="emits('close')" class="closeBtn" src="../../cloudCoachElement/cloudCoachList/imgs/close.png" alt="" />
+      </div>
+    </div>
+    <div class="content">
+      <iframe v-if="props.musicObj.id" :key="props.musicObj.id" class="musicIframe" frameborder="0" :src="url"></iframe>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue"
+import { getMusicResourcesUrl } from "../index"
+
+const emits = defineEmits<{
+  (event: "close"): void
+}>()
+
+const props = defineProps<{
+  musicObj: Record<string, any>
+  type: "MUSIC" | "INSTRUMENT" | "MUSICIAN"
+}>()
+
+const url = computed(() => {
+  return getMusicResourcesUrl(props.type, "modal", props.musicObj.id)
+})
+</script>
+
+<style lang="scss" scoped>
+.musicPreview {
+  width: 100%;
+  height: 100%;
+  .headCon {
+    width: 100%;
+    height: 64px;
+    border-bottom: 1px solid #eaeaea;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .headLeft {
+      margin-left: 30px;
+      display: flex;
+      align-items: center;
+      .title {
+        font-weight: 600;
+        font-size: 18px;
+        color: #131415;
+        line-height: 24px;
+      }
+    }
+    .headright {
+      margin-right: 30px;
+      display: flex;
+      align-items: center;
+      .closeBtn {
+        width: 24px;
+        height: 24px;
+        cursor: pointer;
+        &:hover {
+          opacity: 0.8;
+        }
+      }
+    }
+  }
+  .content {
+    width: 100%;
+    height: calc(100% - 64px);
+    .musicIframe {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+</style>

src/views/components/element/musicResourcesElement/musicResourcesList/musicResourcesList.vue

@@ -0,0 +1,653 @@
+<!-- 弹窗列表 -->
+<template>
+  <div class="musicwikiList">
+    <div class="headCon">
+      <div class="headLeft">
+        <img class="tipImg" :src="tipImgObj[type]" alt="" />
+        <div class="title">{{ titObj[type] }}</div>
+      </div>
+      <div class="headright">
+        <img @click="emits('close')" class="closeBtn" src="../../cloudCoachElement/cloudCoachList/imgs/close.png" alt="" />
+      </div>
+    </div>
+    <div class="content">
+      <div class="tabTools">
+        <div class="tabBox">
+          <div class="tabCon" ref="tabConDom" @wheel.prevent="handleMousewheelTabCon">
+            <div
+              class="tab"
+              @click="handleResourcesTypeChange(item)"
+              :class="{ active: item.id === queryData.resourcesType }"
+              v-for="item in resourcesTypeOption"
+              :key="item.id"
+            >
+              {{ item.name }}
+            </div>
+          </div>
+          <div v-if="horizontalScrollbar" class="tabChangeCon">
+            <div class="tabChangeLeft" @click="handleScrollTabCon(-150)"></div>
+            <div class="tabChangeRight" @click="handleScrollTabCon(150)"></div>
+          </div>
+        </div>
+        <div class="query">
+          <Input :placeholder="'请输入搜索关键词'" v-model:value="queryData.keyword" clearable @enter="handleQuery" @clear="handleQuery">
+            <template #prefix>
+              <img class="img" src="../../cloudCoachElement/cloudCoachList/imgs/query.png" alt="" />
+            </template>
+            <template #suffix>
+              <div class="queryBtn" @click="handleQuery">搜索</div>
+            </template>
+          </Input>
+        </div>
+      </div>
+      <div class="musicListCon">
+        <div class="queryFrom">
+          <div class="queryFromList" v-if="classificationOption.length">
+            <div class="tit">分类：</div>
+            <div class="queryFromCon">
+              <div
+                @click="handleClassificationChange(item)"
+                v-for="item in classificationOption"
+                :key="item.id"
+                :class="['queryTip', queryData.classification === item.id && 'active']"
+              >
+                {{ item.name }}
+              </div>
+            </div>
+          </div>
+          <div class="queryFromList" v-if="typeOption.length">
+            <div class="tit">类型：</div>
+            <div class="queryFromCon">
+              <template v-for="item in typeOption">
+                <div
+                  :class="['queryTip', queryData.type.id === item.id && 'active']"
+                  @click="handleTypeChange(item)"
+                  v-if="item.childrenList.length === 0"
+                  :key="item.id"
+                >
+                  {{ item.name }}
+                </div>
+                <Popover v-model:value="item.isExpand" trigger="mouseenter" v-else :offset="-4" :key="item.id + '_'">
+                  <template #content>
+                    <PopoverMenuItem
+                      @click="
+                        () => {
+                          handleTypeChange(row)
+                          item.isExpand = false
+                        }
+                      "
+                      v-for="row in item.childrenList"
+                      :key="row.id"
+                      :active="row.id === queryData.type.id"
+                      >{{ row.name }}</PopoverMenuItem
+                    >
+                  </template>
+                  <div class="queryTip" :class="{ hoverActive: isActiveSubjectPop(item) }">
+                    <div>{{ queryData.type.id !== item.id && isActiveSubjectPop(item) ? queryData.type.name : item.name }}</div>
+                    <img src="../../cloudCoachElement/cloudCoachList/imgs/jt.png" alt="" />
+                  </div>
+                </Popover>
+              </template>
+            </div>
+          </div>
+        </div>
+        <div class="musicListConBox" v-loading="loading">
+          <div class="musicList" :class="{ empty: !musicList.length && !loading }">
+            <template v-if="musicList.length && !loading">
+              <musicListVue :musicList="musicList" @handle-add="handleAdd" @handle-preview="handlePreview" v-if="type === 'MUSIC'" />
+              <musicianListVue :musicList="musicList" @handle-add="handleAdd" @handle-preview="handlePreview" v-else-if="type === 'MUSICIAN'" />
+              <instrumentListVue :musicList="musicList" @handle-add="handleAdd" @handle-preview="handlePreview" v-else />
+            </template>
+            <Empty v-if="!musicList.length && !loading" />
+          </div>
+          <div class="pagination" v-show="musicList.length">
+            <el-pagination
+              layout="prev, pager, next"
+              :default-page-size="queryData.rows"
+              :current-page="queryData.page"
+              @current-change="handleCurrentChange"
+              :total="queryData.total"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <Modal
+    :contentStyle="{
+      width: '70%',
+      minWidth: '1200px',
+      height: '86%',
+      boxShadow: '0px 2px 10px 0px rgba(0,0,0,0.08)',
+      borderRadius: '16px',
+      border: '1px solid #DEDEDE',
+      padding: '0'
+    }"
+    v-model:visible="previewMusicObjVisible"
+  >
+    <musicPreview
+      :musicObj="previewMusicObj"
+      :type="type"
+      @close="
+        () => {
+          previewMusicObjVisible = false
+        }
+      "
+    />
+  </Modal>
+</template>
+
+<script setup lang="ts">
+import { getKnowledgeWikiCategoryType, getKnowledgeWikiPage } from "@/api/musicResources"
+import { ElLoading, ElPagination } from "element-plus"
+import Input from "@/components/Input.vue"
+import Popover from "@/components/Popover.vue"
+import PopoverMenuItem from "@/components/PopoverMenuItem.vue"
+import Empty from "@/components/Empty"
+import Modal from "@/components/Modal.vue"
+import { httpAjax } from "@/plugins/httpAjax"
+import { reactive, ref, nextTick } from "vue"
+import musicPreview from "./musicPreview.vue"
+import mqjsImg from "@/views/Editor/CanvasTool/imgs/mqjs.png"
+import yyjImg from "@/views/Editor/CanvasTool/imgs/yyj.png"
+import yqbkImg from "@/views/Editor/CanvasTool/imgs/yqbk.png"
+import { CODE_ERR_CANCELED } from "@/libs/auth"
+import musicListVue from "./components/musicList.vue"
+import musicianListVue from "./components/musicianList.vue"
+import instrumentListVue from "./components/instrumentList.vue"
+
+const props = defineProps<{
+  type: "MUSIC" | "INSTRUMENT" | "MUSICIAN"
+}>()
+
+const emits = defineEmits<{
+  (event: "update", item: Record<string, any>, type: "MUSIC" | "INSTRUMENT" | "MUSICIAN"): void
+  (event: "close"): void
+}>()
+
+const titObj = {
+  MUSIC: "名曲鉴赏",
+  INSTRUMENT: "乐器百科",
+  MUSICIAN: "音乐家"
+}
+const tipImgObj = {
+  MUSIC: mqjsImg,
+  INSTRUMENT: yqbkImg,
+  MUSICIAN: yyjImg
+}
+
+const musicList = ref<any[]>([])
+const loading = ref(true)
+const vLoading = ElLoading.directive
+// 资源类型
+const resourcesTypeOption = ref<any[]>([])
+const classificationOption = ref<any[]>([])
+const typeOption = ref<any[]>([])
+
+// 不同类型 每页显示不同的数量
+const pageRowObj = {
+  MUSIC: 21,
+  INSTRUMENT: 24,
+  MUSICIAN: 24
+}
+
+const queryData = reactive({
+  page: 1,
+  rows: pageRowObj[props.type],
+  total: 0,
+  keyword: "",
+  resourcesType: "",
+  classification: "",
+  type: {
+    id: "",
+    name: ""
+  }
+})
+
+getQueryList()
+function getQueryList() {
+  httpAjax(getKnowledgeWikiCategoryType, props.type).then(res => {
+    if (res.code === 200) {
+      resourcesTypeOption.value = res.data?.rows || []
+      // 初始化第三层数据
+      resourcesTypeOption.value.map(item => {
+        item.childrenList?.map((itemVal: any) => {
+          itemVal.childrenList?.map((itemV: any) => {
+            if (itemV.childrenList?.length > 0) {
+              itemV.childrenList = [
+                {
+                  id: itemV.id,
+                  name: "全部",
+                  childrenList: []
+                },
+                ...itemV.childrenList
+              ]
+              Object.assign(itemV, { isExpand: ref(false) })
+            }
+          })
+        })
+      })
+      handleResourcesTypeChange(resourcesTypeOption.value[0])
+      // 判断 有没有滚动条
+      nextTick(() => {
+        hasHorizontalScrollbar()
+      })
+    }
+  })
+}
+
+function handleResourcesTypeChange(item: Record<string, any>) {
+  queryData.resourcesType = item.id
+  classificationOption.value = []
+  queryData.classification = ""
+  typeOption.value = []
+  queryData.type = {
+    id: "",
+    name: ""
+  }
+  if (item.childrenList?.length) {
+    classificationOption.value = [
+      {
+        id: item.id,
+        name: "全部",
+        childrenList: []
+      },
+      ...item.childrenList
+    ]
+    queryData.classification = item.id
+    handleClassificationChange(classificationOption.value[0])
+    return
+  }
+  handleQuery()
+}
+
+function handleClassificationChange(item: Record<string, any>) {
+  queryData.classification = item.id
+  typeOption.value = []
+  queryData.type = {
+    id: "",
+    name: ""
+  }
+  if (item.childrenList?.length) {
+    typeOption.value = [
+      {
+        id: item.id,
+        name: "全部",
+        childrenList: []
+      },
+      ...item.childrenList
+    ]
+    handleTypeChange(typeOption.value[0])
+    return
+  }
+  handleQuery()
+}
+
+function handleTypeChange(item: Record<string, any>) {
+  queryData.type = {
+    id: item.id,
+    name: item.name
+  }
+  handleQuery()
+}
+function isActiveSubjectPop(item: any) {
+  return item.childrenList.some((i: any) => {
+    return i.id === queryData.type.id
+  })
+}
+
+function handleCurrentChange(e: number) {
+  queryData.page = e
+  handleGetQuery()
+}
+function handleQuery() {
+  queryData.page = 1
+  queryData.rows = pageRowObj[props.type]
+  handleGetQuery()
+}
+
+let controller: AbortController
+function handleGetQuery() {
+  loading.value = true
+  let { page, rows, keyword, resourcesType, classification, type } = queryData
+  const wikiCategoryId = type.id || classification || resourcesType
+  const params = {
+    keyword,
+    page,
+    rows,
+    type: props.type,
+    wikiCategoryId
+  }
+  if (controller) {
+    controller.abort()
+  }
+  controller = new AbortController()
+  httpAjax(getKnowledgeWikiPage, params, controller).then(res => {
+    // 自己关闭的时候不取消加载
+    if (res.code === CODE_ERR_CANCELED) {
+      return
+    }
+    if (res.code === 200) {
+      musicList.value = res.data.rows.map((item: any) => {
+        item.highName = highlightedText(item.name, queryData.keyword)
+        return item
+      })
+      queryData.total = res.data.total
+    }
+    loading.value = false
+  })
+}
+const highlightedText = (text: string, query: string) => {
+  if (!text) {
+    return ""
+  }
+  if (!query) {
+    return text
+  }
+  const regex = new RegExp(`(${query})`, "gi")
+  return text.replace(regex, '<span class="highlighted">$1</span>')
+}
+
+/* 预览 */
+const previewMusicObjVisible = ref(false)
+const previewMusicObj = ref<Record<string, any>>({
+  id: "",
+  name: ""
+})
+function handlePreview(item: Record<string, any>) {
+  previewMusicObj.value.id = item.id
+  previewMusicObj.value.name = item.name
+  previewMusicObjVisible.value = true
+}
+function handleAdd(item: Record<string, any>) {
+  emits("update", item, props.type)
+}
+
+// 横向拖动
+const tabConDom = ref<HTMLElement>()
+const horizontalScrollbar = ref(false)
+function handleMousewheelTabCon(event: WheelEvent) {
+  handleScrollTabCon(event.deltaY)
+}
+function handleScrollTabCon(num: number) {
+  tabConDom.value?.scrollBy(num, 0)
+}
+function hasHorizontalScrollbar() {
+  if (tabConDom.value) {
+    horizontalScrollbar.value = tabConDom.value.scrollWidth > tabConDom.value.clientWidth
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.musicwikiList {
+  width: 100%;
+  height: 100%;
+  .headCon {
+    width: 100%;
+    height: 64px;
+    border-bottom: 1px solid #eaeaea;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .headLeft {
+      margin-left: 30px;
+      display: flex;
+      align-items: center;
+      .tipImg {
+        width: 24px;
+        height: 24px;
+      }
+      .title {
+        font-weight: 600;
+        font-size: 18px;
+        color: #131415;
+        margin-left: 8px;
+      }
+    }
+    .headright {
+      margin-right: 30px;
+      display: flex;
+      align-items: center;
+      .closeBtn {
+        width: 24px;
+        height: 24px;
+        cursor: pointer;
+        &:hover {
+          opacity: 0.8;
+        }
+      }
+    }
+  }
+  .content {
+    width: 100%;
+    height: calc(100% - 64px);
+    display: flex;
+    flex-direction: column;
+    .tabTools {
+      height: 72px;
+      width: 100%;
+      padding: 18px 30px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .tabBox {
+        display: flex;
+        margin-right: 20px;
+        .tabCon {
+          display: flex;
+          overflow-x: auto;
+          &::-webkit-scrollbar {
+            display: none;
+          }
+          .tab {
+            flex-shrink: 0;
+            margin-right: 32px;
+            font-weight: 400;
+            font-size: 16px;
+            color: #8b8d98;
+            line-height: 22px;
+            cursor: pointer;
+            &:hover {
+              opacity: 0.8;
+            }
+            &:last-child {
+              margin-right: 0;
+            }
+            &.active {
+              font-weight: 600;
+              color: #131415;
+              position: relative;
+              &::after {
+                content: "";
+                position: absolute;
+                width: 100%;
+                height: 10px;
+                background: linear-gradient(90deg, #77bbff 0%, rgba(163, 231, 255, 0.22) 100%);
+                bottom: 0;
+                left: 0;
+                z-index: -1;
+              }
+            }
+          }
+        }
+        .tabChangeCon {
+          margin-left: 16px;
+          flex-shrink: 0;
+          display: flex;
+          .tabChangeLeft {
+            width: 24px;
+            height: 24px;
+            background: url("./imgs/btnLeft.png") no-repeat;
+            background-size: 100% 100%;
+            cursor: pointer;
+            &:hover {
+              opacity: 0.8;
+            }
+          }
+          .tabChangeRight {
+            margin-left: 16px;
+            width: 24px;
+            height: 24px;
+            background: url("./imgs/btnRight..png") no-repeat;
+            background-size: 100% 100%;
+            cursor: pointer;
+            &:hover {
+              opacity: 0.8;
+            }
+          }
+        }
+      }
+      .query {
+        width: 400px;
+        height: 36px;
+        flex-shrink: 0;
+        &::v-deep(.input) {
+          align-items: center;
+          padding: 0 3px 0 12px;
+          border-radius: 18px;
+          height: 100%;
+          &:not(.disabled):hover,
+          &.focused {
+            .img {
+              opacity: 1;
+            }
+            .queryBtn {
+              opacity: 1;
+            }
+          }
+          input {
+            font-size: 14px;
+          }
+          .img {
+            width: 16px;
+            height: 16px;
+            opacity: 0.4;
+          }
+          .queryBtn {
+            width: 60px;
+            height: 30px;
+            background: #198cfe;
+            border-radius: 16px;
+            font-weight: 500;
+            font-size: 14px;
+            color: #ffffff;
+            line-height: 30px;
+            text-align: center;
+            opacity: 0.4;
+            cursor: pointer;
+            &:hover {
+              opacity: 0.8 !important;
+            }
+          }
+        }
+      }
+    }
+    .musicListCon {
+      width: 100%;
+      flex-grow: 1;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+      .queryFrom {
+        flex-shrink: 0;
+        padding: 0 30px;
+        .queryFromList {
+          display: flex;
+          margin-bottom: 4px;
+          .tit {
+            flex-shrink: 0;
+            font-weight: 500;
+            font-size: 14px;
+            color: #131415;
+            line-height: 32px;
+            margin-right: 16px;
+          }
+          .queryFromCon {
+            display: flex;
+            flex-wrap: wrap;
+            .queryTip {
+              margin: 0 16px 12px 0;
+              font-weight: 400;
+              font-size: 14px;
+              color: rgba(0, 0, 0, 0.6);
+              line-height: 20px;
+              padding: 6px 16px;
+              background: #f5f6fa;
+              border-radius: 6px;
+              cursor: pointer;
+              display: flex;
+              align-items: center;
+              & > img {
+                width: 7px;
+                height: 4px;
+                margin-left: 6px;
+              }
+              &:hover {
+                background: #e8e9ed;
+                color: #5d5d5e;
+                > img {
+                  transform: rotate(180deg);
+                }
+              }
+              &.active {
+                background: #d2ecff;
+                color: rgba(0, 0, 0, 1);
+              }
+              &.hoverActive {
+                background: #d2ecff;
+                color: rgba(0, 0, 0, 1);
+              }
+            }
+          }
+        }
+      }
+      .isExpand {
+        flex-shrink: 0;
+        margin-bottom: 12px;
+        cursor: pointer;
+        display: flex;
+        justify-content: center;
+        font-weight: 400;
+        font-size: 14px;
+        color: #198cfe;
+        line-height: 20px;
+        align-items: center;
+        &:hover {
+          opacity: 0.8;
+        }
+        &.active > img {
+          transform: rotate(0deg);
+        }
+        & > img {
+          transform: rotate(180deg);
+          margin-left: 4px;
+          width: 10px;
+          height: 10px;
+        }
+      }
+      .musicListConBox {
+        flex-grow: 1;
+        overflow: hidden;
+        .musicList {
+          padding: 4px 0;
+          height: calc(100% - 60px);
+          overflow: auto;
+          &.empty {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          }
+        }
+        .pagination {
+          padding: 0 30px;
+          display: flex;
+          justify-content: flex-end;
+          align-items: center;
+          height: 60px;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/components/element/musicResourcesElement/musicTheoryList/courseCollapse.vue

@@ -0,0 +1,168 @@
+<template>
+  <ElCollapse class="courseCollapse" accordion v-model="myActiveCollapse">
+    <ElCollapseItem v-for="item in props.courseList" :key="item.id" :name="item.id">
+      <template #title>
+        <div class="courseCollapseHead">
+          <div class="tip"></div>
+          <div class="list"></div>
+          <div class="courseCollapseHeadTit">
+            {{ item.name }}
+          </div>
+        </div>
+      </template>
+      <div class="courseCollapseCon">
+        <div
+          class="itemCon"
+          :class="{ active: myActiveCollapseId === itemV.id }"
+          v-for="itemV in item.lessonCoursewareDetailKnowledgeDetailList"
+          :key="itemV.id"
+          @click="handleCollapseItem(itemV)"
+        >
+          <div class="itemName">{{ itemV.name }}</div>
+        </div>
+      </div>
+    </ElCollapseItem>
+  </ElCollapse>
+</template>
+
+<script setup lang="ts">
+import { ElCollapse, ElCollapseItem } from "element-plus"
+import { ref, watch } from "vue"
+
+const props = defineProps<{
+  activeCollapse: string
+  activeCollapseId: string
+  courseList: any[]
+}>()
+
+const emits = defineEmits<{
+  (event: "handleCollapseItem", item: Record<string, any>): void
+}>()
+
+const myActiveCollapse = ref(props.activeCollapse)
+const myActiveCollapseId = ref(props.activeCollapseId)
+watch(
+  () => props.activeCollapse,
+  () => {
+    myActiveCollapse.value = props.activeCollapse
+  }
+)
+watch(
+  () => props.activeCollapseId,
+  () => {
+    myActiveCollapseId.value = props.activeCollapseId
+  }
+)
+
+function handleCollapseItem(item: Record<string, any>) {
+  emits("handleCollapseItem", item)
+}
+</script>
+
+<style lang="scss" scoped>
+.courseCollapse {
+  border: none;
+  ::v-deep(.el-collapse-item) {
+    padding: 0 8px;
+    &.is-active {
+      background: #f5f6fa;
+      border-radius: 10px;
+      .el-collapse-item__header,
+      .el-collapse-item__wrap {
+        background-color: transparent;
+      }
+      .courseCollapseHead {
+        .tip {
+          background: url("./imgs/actJ.png") no-repeat;
+          background-size: 16px 16px;
+        }
+        .list {
+          background-image: url("./imgs//actList.png");
+        }
+        .courseCollapseHeadTit {
+          font-weight: 600;
+          color: #131415;
+        }
+      }
+    }
+    .el-collapse-item__header {
+      border-bottom: none;
+    }
+    .el-collapse-item__arrow {
+      display: none;
+    }
+    .el-collapse-item__wrap {
+      border-bottom: none;
+      .el-collapse-item__content {
+        padding-bottom: 12px;
+      }
+    }
+  }
+  .courseCollapseHead {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    .tip {
+      margin-left: 8px;
+      width: 16px;
+      height: 16px;
+      background: url("./imgs/j.png") no-repeat;
+      background-size: 8px 12px;
+      background-position: center;
+      flex-shrink: 0;
+    }
+    .list {
+      margin: 0 8px;
+      width: 16px;
+      height: 18px;
+      background: url("./imgs/list.png") no-repeat;
+      background-size: 100% 100%;
+      flex-shrink: 0;
+    }
+    .courseCollapseHeadTit {
+      font-weight: 400;
+      font-size: 16px;
+      color: #8b8d98;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+  .courseCollapseCon {
+    .itemCon {
+      width: 100%;
+      height: 40px;
+      border-radius: 6px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-top: 8px;
+      cursor: pointer;
+      &:first-child {
+        margin-top: 0;
+      }
+      &:hover {
+        opacity: 0.8;
+      }
+      &.active {
+        background: rgba(16, 31, 87, 0.06);
+        .itemName {
+          font-weight: 600;
+          color: #0482ff;
+        }
+      }
+    }
+    .itemName {
+      margin-left: 56px;
+      margin-right: 10px;
+      font-weight: 400;
+      font-size: 14px;
+      color: #131415;
+      line-height: 20px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+}
+</style>

src/views/components/element/musicResourcesElement/musicTheoryList/index.ts

@@ -0,0 +1,2 @@
+import musicTheoryList from "./musicTheoryList.vue"
+export default musicTheoryList

src/views/components/element/musicResourcesElement/musicTheoryList/musicTheoryList.vue

@@ -0,0 +1,179 @@
+<!-- 乐理知识 弹窗列表 -->
+<template>
+  <div class="musicTheoryList">
+    <div class="headCon">
+      <div class="headLeft">
+        <img class="tipImg" src="@/views/Editor/CanvasTool/imgs/ylzs.png" alt="" />
+        <div class="title">乐理知识</div>
+      </div>
+      <div class="headright">
+        <img @click="emits('close')" class="closeBtn" src="../../cloudCoachElement/cloudCoachList/imgs/close.png" alt="" />
+      </div>
+    </div>
+    <div class="content">
+      <div class="leftCon">
+        <courseCollapse
+          :courseList="listKnowledgeData"
+          :activeCollapse="listKnowledgeData[0]?.id || ''"
+          :activeCollapseId="activeCollapseItem?.id || ''"
+          @handleCollapseItem="handleCollapseItem"
+        />
+      </div>
+      <div class="rightCon">
+        <iframe v-if="activeCollapseItem.id" :key="activeCollapseItem.id" class="musicIframe" frameborder="0" :src="url"></iframe>
+      </div>
+    </div>
+    <div class="btnCon">
+      <div class="cancelBtn" @click="emits('close')">取消</div>
+      <div class="addBtn" @click="handleAdd">添加</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { getListKnowledge } from "@/api/musicResources"
+import { httpAjax } from "@/plugins/httpAjax"
+import { ref, computed } from "vue"
+import courseCollapse from "./courseCollapse.vue"
+import { getMusicResourcesUrl } from "../index"
+
+const emits = defineEmits<{
+  (event: "update", item: Record<string, any>, type: "THEORY"): void
+  (event: "close"): void
+}>()
+
+const listKnowledgeData = ref<any[]>([])
+const activeCollapseItem = ref<Record<string, any>>({})
+initListKnowledge()
+function initListKnowledge() {
+  httpAjax(getListKnowledge).then(res => {
+    if (res.code === 200) {
+      listKnowledgeData.value = res.data || []
+      activeCollapseItem.value = listKnowledgeData.value[0]?.lessonCoursewareDetailKnowledgeDetailList[0] || {}
+    }
+  })
+}
+function handleCollapseItem(item: Record<string, any>) {
+  activeCollapseItem.value = item
+}
+const url = computed(() => {
+  return getMusicResourcesUrl("THEORY", "modal", activeCollapseItem.value?.id)
+})
+
+function handleAdd() {
+  emits("update", activeCollapseItem.value, "THEORY")
+}
+</script>
+
+<style lang="scss" scoped>
+.musicTheoryList {
+  width: 100%;
+  height: 100%;
+  .headCon {
+    width: 100%;
+    height: 64px;
+    border-bottom: 1px solid #eaeaea;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .headLeft {
+      margin-left: 30px;
+      display: flex;
+      align-items: center;
+      .tipImg {
+        width: 24px;
+        height: 24px;
+      }
+      .title {
+        font-weight: 600;
+        font-size: 18px;
+        color: #131415;
+        margin-left: 8px;
+      }
+    }
+    .headright {
+      margin-right: 30px;
+      display: flex;
+      align-items: center;
+      .closeBtn {
+        width: 24px;
+        height: 24px;
+        cursor: pointer;
+        &:hover {
+          opacity: 0.8;
+        }
+      }
+    }
+  }
+  .content {
+    width: 100%;
+    height: calc(100% - 130px);
+    background: #f5f6fa;
+    display: flex;
+    padding: 24px 12px 0 30px;
+    .leftCon {
+      overflow-y: auto;
+      width: 360px;
+      height: 100%;
+      flex-shrink: 0;
+      background: #ffffff;
+      border-top-left-radius: 16px;
+      border-top-right-radius: 16px;
+      padding: 12px;
+    }
+    .rightCon {
+      margin-left: 20px;
+      height: 100%;
+      flex-grow: 1;
+      .musicIframe {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+  .btnCon {
+    width: 100%;
+    height: 66px;
+    padding: 0 30px;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    border-top: 1px solid #eaeaea;
+    .addBtn {
+      width: 76px;
+      height: 34px;
+      background: linear-gradient(312deg, #1b7af8 0%, #3cbbff 100%);
+      border-radius: 6px;
+      line-height: 34px;
+      text-align: center;
+      font-weight: 600;
+      font-size: 14px;
+      color: #ffffff;
+      cursor: pointer;
+      &:hover {
+        opacity: 0.8;
+      }
+      &.disabled {
+        opacity: 0.7;
+        cursor: default;
+      }
+    }
+    .cancelBtn {
+      margin-right: 12px;
+      width: 76px;
+      height: 34px;
+      background: #f1f2f6;
+      border-radius: 6px;
+      line-height: 34px;
+      text-align: center;
+      font-weight: 600;
+      font-size: 14px;
+      color: #1e2022;
+      cursor: pointer;
+      &:hover {
+        opacity: 0.8;
+      }
+    }
+  }
+}
+</style>