显示曲目名称

.env.development

@@ -1,5 +1,5 @@
 
-VITE_APP_URL = "http://192.168.3.122:9527/pptApi"
+VITE_APP_URL = "http://localhost:9527/pptApi"
 
 ## 云教练地址
 VITE_YJL_URL = "https://test.kt.colexiu.com/instrument"

src/hooks/useCreateElement.ts

@@ -322,7 +322,7 @@ export default () => {
    * 创建云教练元素
    * @param url 云教练地址
    */
-  const createCloudCoachElement = (sid: string) => {
+  const createCloudCoachElement = (sid: string, title: string) => {
     createElement({
       type: "elf",
       subtype: "elf-sing-play",
@@ -332,7 +332,8 @@ export default () => {
       rotate: 0,
       left: 0,
       top: 0,
-      sid
+      sid,
+      title
     })
   }
 

src/types/slides.ts

@@ -625,11 +625,14 @@ export interface PPTAudioElement extends PPTBaseElement {
  * subtype: elf-sing-play
  *
  * sid: 曲子id
+ *
+ * title：曲目名称
  */
 export interface PPTCloudCoachElement extends PPTBaseElement {
   type: "elf"
   subtype: "elf-sing-play"
   sid: string
+  title: string
 }
 
 export type PPTElement =

src/views/Editor/CanvasTool/index.vue

@@ -341,8 +341,8 @@ function handleUpload(fileData: UploadRequestOptions) {
 }
 
 // 处理云教练创建
-function handleCloudCoach(id: string) {
-  createCloudCoachElement(id)
+function handleCloudCoach(id: string, name: string) {
+  createCloudCoachElement(id, name)
   cloudCoachVisible.value = false
 }
 

src/views/components/element/cloudCoachElement/BaseCloudCoachElement.vue

@@ -9,17 +9,23 @@
     }"
   >
     <div class="rotate-wrapper" :style="{ transform: `rotate(${elementInfo.rotate}deg)` }">
-      <div class="element-content"></div>
+      <div class="element-content">
+        <div class="title" :style="{ fontSize: 14 / scale + 'px' }">{{ elementInfo.title || "乐谱" }}</div>
+      </div>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
 import type { PPTCloudCoachElement } from "@/types/slides"
+import { ref, inject } from "vue"
+import { injectKeySlideScale } from "@/types/injectKey"
 
 defineProps<{
   elementInfo: PPTCloudCoachElement
 }>()
+
+const scale = inject(injectKeySlideScale) || ref(1)
 </script>
 
 <style lang="scss" scoped>
@@ -36,7 +42,14 @@ defineProps<{
   display: flex;
   justify-content: center;
   align-items: center;
-  background: url("./cloudCoachList//imgs/musicBg.png") no-repeat;
+  background: url("./cloudCoachList/imgs/musicBg.png") no-repeat;
   background-size: 100% 100%;
+  .title {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding: 0 40px;
+    color: #fff;
+  }
 }
 </style>

src/views/components/element/cloudCoachElement/cloudCoachList/cloudCoachList.vue

@@ -123,7 +123,7 @@
                 </div>
                 <div class="musicRight">
                   <img class="sc" @click="handleFavorite(item)" :src="item.favoriteFlag ? scActImg : scImg" alt="" />
-                  <div class="addBtn" @click="handleAddMusic(item.id)">添加</div>
+                  <div class="addBtn" @click="handleAddMusic(item.id, item.name)">添加</div>
                 </div>
               </div>
             </div>
@@ -153,12 +153,12 @@ import scActImg from "./imgs/scAct.png"
 import scImg from "./imgs/sc.png"
 
 const emits = defineEmits<{
-  (event: "update", id: string): void
+  (event: "update", id: string, name: string): void
   (event: "close"): void
 }>()
 
-function handleAddMusic(id: string) {
-  emits("update", id)
+function handleAddMusic(id: string, name: string) {
+  emits("update", id, name)
   emits("close")
 }