feat: 单行谱页面

src/page-instrument/router.ts

@@ -24,6 +24,10 @@ const routes: RouteRecordRaw[] = [
     component: () => import("./view-figner/index"),
   },
   {
+    path: "/simple-detail", // 简单的一行谱页面
+    component: () => import("./simple-detail/index"),
+  },
+  {
     path: "/:pathMatch(.*)*",
     component: Notfind,
     meta: {

src/page-instrument/simple-detail/index.module.less

@@ -0,0 +1,34 @@
+.skeleton {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100vw;
+    height: 100vh;
+    padding: 20px 30px;
+    background-color: #fff;
+    z-index: 1000;
+    --van-skeleton-paragraph-height: .8rem;
+}
+
+.detail {
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+    overflow-y: auto;
+    --header-height: 62px;
+    background: var(--container-background);
+
+    .container {
+        margin: 0 10px;
+        border-radius: 10px;
+    }
+    :global{
+        #osmdCanvasPage1 {
+            position: relative !important;
+        }
+        #musicAndSelection{
+            height: initial !important;
+            max-height: initial !important;
+        }
+    }
+}

src/page-instrument/simple-detail/index.tsx

@@ -0,0 +1,56 @@
+import { defineComponent, onMounted, onUnmounted, reactive } from "vue";
+import state, { getMusicDetail } from "/src/state";
+import MusicScore from "../../view/music-score";
+import styles from "./index.module.less";
+import { getQuery } from "/src/utils/queryString";
+import { closeToast, showLoadingToast } from "vant";
+
+
+export default defineComponent({
+	name: "music-list",
+	setup() {
+		const query: any = getQuery();
+
+		const detailData = reactive({
+			isLoading: true,
+		});
+
+		const communicateCb = (res: any) => {
+			// 播放进度
+			if (res?.data?.api === "playProgress") {
+				if (res?.data.data) {
+					console.log(res.data)
+				}
+			}
+		};
+
+		onMounted(async () => {
+			const id = query.id || '';
+			await getMusicDetail(id);
+			detailData.isLoading = false;
+			state.isSingleLine = true;
+			window.addEventListener("message", communicateCb);
+		});
+
+		onUnmounted(() => {
+			window.removeEventListener("message", communicateCb);
+		});
+		/** 渲染完成 */
+		const handleRendered = async () => {
+			console.log('渲染完成')
+		};
+
+		return () => (
+			<div class={styles.detail}>
+				<div id="scrollContainer" class={[styles.container, "hideCursor"]}>
+					{/* 曲谱渲染 */}
+					{!detailData.isLoading && 
+					<MusicScore 
+						onRendered={handleRendered} 
+						musicColor={'#FFFFFF'}
+					/>}
+				</div>
+			</div>
+		);
+	},
+});

src/view/music-score/index.module.less

@@ -17,7 +17,7 @@
         //     transform-origin: left top;
         // }
         #osmdCanvasPage1{
-            position: absolute !important;
+            //position: absolute !important;
             left: 0;
             top: 2.4rem;
         }