选段控制速度

index.html

@@ -71,7 +71,6 @@
       if (broswer.broswer === 'Chrome' && parseFloat(broswer.version) <= 50) {
         document.getElementById('update').className = 'show'
       }
-      document.getElementById('loading').className = ''
     })
   </script>
 </head>

package-lock.json

@@ -8,6 +8,7 @@
       "name": "cloud-exercise",
       "version": "0.0.0",
       "dependencies": {
+        "@varlet/ui": "^2.9.5",
         "clean-deep": "^3.4.0",
         "consola": "^2.15.3",
         "dayjs": "^1.11.7",
@@ -2160,6 +2161,15 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.7",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.7.tgz",
+      "integrity": "sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@rollup/pluginutils": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.0.2.tgz",
@@ -2225,6 +2235,43 @@
         "vue": "^3.0.0"
       }
     },
+    "node_modules/@varlet/icons": {
+      "version": "2.9.5",
+      "resolved": "https://registry.npmjs.org/@varlet/icons/-/icons-2.9.5.tgz",
+      "integrity": "sha512-szBA3xZ0nwg5JaLhsC3EjL+h7dg+T5IKW5POPiHDkUjHZjd4gJJAjop2qPmoMwrh1En5wocHOxsmfGc4OSGKUg=="
+    },
+    "node_modules/@varlet/shared": {
+      "version": "2.9.5",
+      "resolved": "https://registry.npmjs.org/@varlet/shared/-/shared-2.9.5.tgz",
+      "integrity": "sha512-aQ7eGpCR1QE0W3C74M6NdwZsVfpT5HFpA9xmpLPWpaGaKs0WC8nEiSUverAP/4P2bk2DP7iJqNHSdz5DAlXCLw=="
+    },
+    "node_modules/@varlet/ui": {
+      "version": "2.9.5",
+      "resolved": "https://registry.npmjs.org/@varlet/ui/-/ui-2.9.5.tgz",
+      "integrity": "sha512-CLZkmF84zSB4zgldvdk34hv5h3JsriegoRaeGG5NLzjQIRx/oONc8IyuibDP4xohsGT0Prvy1pC3fz5x8yYmvg==",
+      "dependencies": {
+        "@popperjs/core": "^2.11.6",
+        "@varlet/icons": "2.9.5",
+        "@varlet/shared": "2.9.5",
+        "@varlet/use": "2.9.5",
+        "dayjs": "^1.10.4",
+        "decimal.js": "^10.2.1"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
+    "node_modules/@varlet/use": {
+      "version": "2.9.5",
+      "resolved": "https://registry.npmjs.org/@varlet/use/-/use-2.9.5.tgz",
+      "integrity": "sha512-gDC1irOU+7oz0vuwMgVO4yWLUbv+ROuzYKCPtXvZpZsgs+X99tDu4qOxAb0VnNC+SFrEWIbej33Rq4seLO/aVw==",
+      "dependencies": {
+        "@varlet/shared": "2.9.5"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/@vitejs/plugin-legacy": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-legacy/-/plugin-legacy-4.0.2.tgz",
@@ -2877,6 +2924,11 @@
         }
       }
     },
+    "node_modules/decimal.js": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz",
+      "integrity": "sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA=="
+    },
     "node_modules/decode-uri-component": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.4.1.tgz",
@@ -5861,6 +5913,11 @@
         "fastq": "^1.6.0"
       }
     },
+    "@popperjs/core": {
+      "version": "2.11.7",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.7.tgz",
+      "integrity": "sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw=="
+    },
     "@rollup/pluginutils": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.0.2.tgz",
@@ -5913,6 +5970,37 @@
       "integrity": "sha512-Zxd7lDz/LliVYEQi3PR9a8CQa/kGCVzF0u9hqDMaTlgXlbG0wHMFPllrcG0ThR6bfs8xrYVuSFM9pJn6HSoUGQ==",
       "requires": {}
     },
+    "@varlet/icons": {
+      "version": "2.9.5",
+      "resolved": "https://registry.npmjs.org/@varlet/icons/-/icons-2.9.5.tgz",
+      "integrity": "sha512-szBA3xZ0nwg5JaLhsC3EjL+h7dg+T5IKW5POPiHDkUjHZjd4gJJAjop2qPmoMwrh1En5wocHOxsmfGc4OSGKUg=="
+    },
+    "@varlet/shared": {
+      "version": "2.9.5",
+      "resolved": "https://registry.npmjs.org/@varlet/shared/-/shared-2.9.5.tgz",
+      "integrity": "sha512-aQ7eGpCR1QE0W3C74M6NdwZsVfpT5HFpA9xmpLPWpaGaKs0WC8nEiSUverAP/4P2bk2DP7iJqNHSdz5DAlXCLw=="
+    },
+    "@varlet/ui": {
+      "version": "2.9.5",
+      "resolved": "https://registry.npmjs.org/@varlet/ui/-/ui-2.9.5.tgz",
+      "integrity": "sha512-CLZkmF84zSB4zgldvdk34hv5h3JsriegoRaeGG5NLzjQIRx/oONc8IyuibDP4xohsGT0Prvy1pC3fz5x8yYmvg==",
+      "requires": {
+        "@popperjs/core": "^2.11.6",
+        "@varlet/icons": "2.9.5",
+        "@varlet/shared": "2.9.5",
+        "@varlet/use": "2.9.5",
+        "dayjs": "^1.10.4",
+        "decimal.js": "^10.2.1"
+      }
+    },
+    "@varlet/use": {
+      "version": "2.9.5",
+      "resolved": "https://registry.npmjs.org/@varlet/use/-/use-2.9.5.tgz",
+      "integrity": "sha512-gDC1irOU+7oz0vuwMgVO4yWLUbv+ROuzYKCPtXvZpZsgs+X99tDu4qOxAb0VnNC+SFrEWIbej33Rq4seLO/aVw==",
+      "requires": {
+        "@varlet/shared": "2.9.5"
+      }
+    },
     "@vitejs/plugin-legacy": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-legacy/-/plugin-legacy-4.0.2.tgz",
@@ -6438,6 +6526,11 @@
         "ms": "2.1.2"
       }
     },
+    "decimal.js": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz",
+      "integrity": "sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA=="
+    },
     "decode-uri-component": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.4.1.tgz",

package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview --open"
   },
   "dependencies": {
+    "@varlet/ui": "^2.9.5",
     "clean-deep": "^3.4.0",
     "consola": "^2.15.3",
     "dayjs": "^1.11.7",

src/page-gym/App.tsx

@@ -36,6 +36,7 @@ export default defineComponent({
 				setToken(query.Authorization);
 			}
 			setUser();
+			document.getElementById('loading')!.className = ''
 		});
 
 		const inited = computed(() => {

src/page-gym/detail/index.module.less

@@ -34,13 +34,19 @@
         }
     }
 
-    .musicContainer {
-        position: relative;
-    }
+    
+}
+.plugins{
+    position: fixed;
+    z-index: -100;
+    bottom: -100%;
+    left: -100%;
 }
 
 :global {
-    
+    #musicAndSelection {
+        position: relative;
+    }
     #musicContainer #cursorImg-0 {
         background-repeat: repeat-y;
         background-color: transparent;

src/page-gym/detail/index.tsx

@@ -10,8 +10,11 @@ import { getQuery } from "../../utils/queryString";
 import AudioList from "../../view/audio-list";
 import MusicScore from "../../view/music-score";
 import { sysMusicScoreAccompanimentQueryPage, sysMusicScoreCategoriesQueryTree } from "../api";
+import EvaluatModel from "../evaluat-model";
 import HeaderTop from "../header-top";
 import styles from "./index.module.less";
+import Evaluating from "/src/view/evaluating";
+import MeasureSpeed from "/src/view/plugins/measure-speed";
 import Selection from "/src/view/selection";
 
 //特殊教材分类id
@@ -24,14 +27,13 @@ export default defineComponent({
 		const paramsId = route.params.id as string;
 		const detailData = reactive({
 			isLoading: true,
-			isRenderLoading: true, //曲谱渲染
+			svgRendered: false, // 曲谱渲染完成
 			/** 可以加载点击浮层  */
 			showSelection: false,
 		});
 		// console.log(route.params, query)
 		/** 获取曲谱数据 */
-		const getMusicInfo = async () => {
-			const res = await sysMusicScoreAccompanimentQueryPage(paramsId);
+		const getMusicInfo = (res: any) => {
 			const index = query["part-index"] ? parseInt(query["part-index"] as string) : 0;
 			const musicInfo = res.data[index];
 			// console.log("🚀 ~ musicInfo:", musicInfo);
@@ -63,13 +65,11 @@ export default defineComponent({
 			return ids;
 		};
 		/** 获取分类数据 */
-		const getCategory = async () => {
-			const res = await sysMusicScoreCategoriesQueryTree(storeData.platformType === "WEB");
-			// console.log("特殊曲谱分类ids:");
-			// console.log(getIds(res.data).toString());
+		const getCategory = (res: any) => {
+			console.log("特殊曲谱分类ids:");
+			console.log(getIds(res.data).toString());
 		};
 
-		
 		const setState = (data: any, index: number) => {
 			state.xmlUrl = data.xmlUrl;
 			state.partIndex = index;
@@ -97,7 +97,7 @@ export default defineComponent({
 			state.playMode = data.playMode;
 			state.originSpeed = state.speed = data.speed;
 			state.track = data.track;
-			state.isOpenPrepare = true
+			state.isOpenPrepare = true;
 		};
 
 		const setCustom = () => {
@@ -106,15 +106,17 @@ export default defineComponent({
 			}
 		};
 
-		onMounted(async () => {
+		onMounted(() => {
 			(window as any).appName = "gym";
-			await getCategory();
-			await getMusicInfo();
+			Promise.all([sysMusicScoreCategoriesQueryTree(storeData.platformType === "WEB"), sysMusicScoreAccompanimentQueryPage(paramsId)]).then((values) => {
+				getCategory(values[0]);
+				getMusicInfo(values[1]);
+			});
 		});
 
 		/** 渲染完成 */
 		const handleRendered = (osmd: any) => {
-			detailData.isRenderLoading = false;
+			detailData.svgRendered = true;
 			state.osmd = osmd;
 			state.times = formateTimes(osmd);
 			console.log("🚀 ~ state.times:", state.times);
@@ -126,23 +128,32 @@ export default defineComponent({
 		};
 		return () => (
 			<div class={styles.detail}>
-				{detailData.isRenderLoading && (
+				{!detailData.svgRendered && (
 					<div class={styles.skeleton}>
 						<Skeleton class={styles.skeleton} row={8} />
 					</div>
 				)}
 				<div class={styles.headHeight}>
-					<Transition name="van-slide-down">{!detailData.isRenderLoading && <HeaderTop />}</Transition>
+					<Transition name="van-slide-down">{detailData.svgRendered && <HeaderTop />}</Transition>
 				</div>
 				<div class={styles.container} id="mainContainer">
+					{state.modeType === "evaluating" && (
+						<>
+							<Evaluating />
+							<EvaluatModel />
+						</>
+					)}
 					{!detailData.isLoading && (
-						<div class={styles.musicContainer}>
+						<div id="musicAndSelection">
 							<MusicScore onRendered={handleRendered} />
 							{detailData.showSelection && <Selection />}
 						</div>
 					)}
 					{!detailData.isLoading && <AudioList />}
 				</div>
+				<div class={styles.plugins}>
+					{detailData.svgRendered && <MeasureSpeed />}
+				</div>
 			</div>
 		);
 	},

src/page-gym/header-top/image/icon-background.svg

@@ -1,14 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="34px" height="34px" viewBox="0 0 34 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>编组 5备份</title>
-    <g id="云教练2版" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="画板" transform="translate(-449.000000, -55.000000)">
-            <g id="编组-5备份" transform="translate(451.000000, 57.000000)">
-                <rect id="矩形" stroke="#8EE1DC" stroke-width="2" fill="#FFFFFF" x="-1" y="-1" width="32" height="32" rx="12"></rect>
-                <g id="编组" transform="translate(5.000000, 7.000000)" fill="#01C1B5" fill-rule="nonzero">
-                    <path d="M14.6025001,14.7575455 C15.727559,15.7058862 17.3506352,15.6867741 18.4543635,14.7121888 C19.5580918,13.7376035 19.8248793,12.0879777 19.0875,10.7973182 L14.6025001,14.7575455 Z M13.7782501,13.6664545 L18.19725,9.81440909 C17.0824899,9.02562521 15.5933198,9.10278516 14.5609925,10.0028184 C13.5286652,10.9028516 13.2084129,12.4032342 13.7790001,13.6664545 L13.7782501,13.6664545 Z M18.0000001,6.37654546 C17.4994985,6.24404164 16.9845011,6.17859277 16.4677501,6.18181818 L16.4677501,3.12413637 C16.4677501,2.27060539 15.7961772,1.57868182 14.9677501,1.57868182 L6.12750021,1.57868182 C5.49300021,1.57868182 4.97850024,2.108 4.97850022,2.76172728 L4.97850022,3.17281818 C4.97850022,3.59958367 5.31428666,3.94554546 5.72850022,3.94554546 L14.1862501,3.94554546 C14.6004636,3.94554547 14.9362501,4.29150724 14.9362501,4.71827272 L14.9362501,4.7515 C14.9362501,5.17826549 14.6004637,5.52422727 14.1862501,5.52422728 L5.72850022,5.52422728 C5.31428666,5.52422728 4.97850023,5.87018906 4.97850022,6.29695454 L4.97850022,13.2182727 C4.97850029,14.6348324 3.86414637,15.7833006 2.48925026,15.7837273 L1.91475026,15.7837273 C1.40679702,15.7837273 0.919659179,15.5757761 0.560552337,15.2056424 C0.201445496,14.8355086 -0.000198671618,14.3335276 1.46884807e-07,13.8101818 L1.46884807e-07,13.6131364 C1.46884807e-07,12.6317727 0.771750288,11.8374091 1.72350028,11.8374091 C2.67525027,11.8374091 3.44700026,11.0422727 3.44700024,10.0616818 L3.44700024,1.54545454 C3.44700024,0.691923568 4.11857311,0 4.94700022,0 L16.5000001,0 C17.3284272,0 18.0000001,0.691923568 18.0000001,1.54545454 L18.0000001,6.37654546 Z M16.5000001,17 C14.0147187,17 12.0000001,14.9242293 12.0000001,12.3636364 C12.0000001,9.80304343 14.0147187,7.72727272 16.5000001,7.72727272 C18.9852814,7.72727272 21.0000001,9.80304343 21.0000001,12.3636364 C21.0000001,14.9242293 18.9852814,17 16.5000001,17 Z" id="形状"></path>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>

src/page-gym/header-top/image/icon-evaluating.svg

@@ -1,14 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="34px" height="34px" viewBox="0 0 34 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>编组 5</title>
-    <g id="云教练2版" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="长笛备份-10" transform="translate(-426.000000, -9.000000)">
-            <g id="编组-5" transform="translate(428.000000, 11.000000)">
-                <rect id="矩形" stroke="#8EE1DC" stroke-width="2" fill="#FFFFFF" x="-1" y="-1" width="32" height="32" rx="12"></rect>
-                <g id="编组" transform="translate(7.444444, 7.000000)" fill="#01C1B5" fill-rule="nonzero">
-                    <path d="M11.864492,9.57379933 L12.5217501,13.3728952 C12.5737935,13.6738302 12.5217501,13.88914 12.2732847,14.0687034 C12.0237192,14.2483919 11.6928065,14.2722378 11.4196047,14.1302204 L7.90163735,12.2514553 C7.6846214,12.1383792 7.42530062,12.1383792 7.20828467,12.2514553 L3.83805347,14.1302204 C3.56485164,14.2722378 3.23393899,14.2483919 2.98437349,14.0687034 C2.73506872,13.88914 2.53612853,13.6738301 2.58817197,13.3728952 L3.39400558,9.49482469 C3.43512937,9.25594025 3.35511011,9.01229367 3.17995602,8.84307607 L0.245378621,6.55696807 C0.0240651899,6.34386262 -0.0557141321,6.02471109 0.0396498736,5.73396478 C0.135013879,5.44321847 0.388943125,5.23142074 0.694462978,5.18779718 L4.51126031,4.5244102 C4.75346399,4.4893316 4.96278558,4.33859462 5.07114679,4.12122388 L6.82887134,0.448487437 C6.96482343,0.173977217 7.2466509,0 7.55538071,0 C7.86411053,0 8.14593799,0.173977217 8.28189008,0.448487437 L9.96994362,4.12122388 C10.0790669,4.33902762 10.2889194,4.4894951 10.5306695,4.5244102 L14.4171379,5.18779718 C14.7227539,5.23134591 14.9767089,5.44333977 15.0717762,5.7342692 C15.1668436,6.02519864 15.0864514,6.34434966 14.8645434,6.55696807 L12.0777022,8.9212194 C11.9031198,9.09061742 11.8230779,9.33464369 11.864492,9.57379933 Z" id="路径"></path>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>

src/page-gym/header-top/image/icon-music.svg

@@ -1,13 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="34px" height="34px" viewBox="0 0 34 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>编组 5备份 4</title>
-    <g id="云教练2版" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="画板" transform="translate(-411.000000, -55.000000)">
-            <g id="编组-5备份-4" transform="translate(413.000000, 57.000000)">
-                <rect id="矩形" stroke="#8EE1DC" stroke-width="2" fill="#FFFFFF" x="-1" y="-1" width="32" height="32" rx="12"></rect>
-                <path d="M21.5000001,7 C22.3284272,7 23.0000001,7.69192357 23.0000001,8.54545454 L23.0000001,13.3765455 L22.978,13.371 L22.9785014,20.2187573 C22.9785014,21.635317 21.8641475,22.7837852 20.4892514,22.7842119 L19.9147514,22.7842119 C19.4067982,22.7842119 18.9196603,22.5762607 18.5605535,22.2061269 C18.2014467,21.8359931 17.9998025,21.3340121 18,20.8106664 L18,20.6136209 C18,19.6322573 18.7717515,18.8378937 19.7235014,18.8378937 C20.6752514,18.8378937 21.4470014,18.0427573 21.4470014,17.0621664 L21.4470014,10.5459391 C21.4470014,10.4809192 21.4536669,10.421707 21.4669979,10.3683026 L21.4677501,10.1241364 C21.4677501,9.27060539 20.7961772,8.57868182 19.9677501,8.57868182 L11.1275002,8.57868182 C10.4930002,8.57868182 9.97850024,9.108 9.97850022,9.76172728 L9.97850022,10.1728182 C9.97850022,10.5995837 10.3142867,10.9455455 10.7285002,10.9455455 L19.1862501,10.9455455 C19.6004636,10.9455455 19.9362501,11.2915072 19.9362501,11.7182727 L19.9362501,11.7515 C19.9362501,12.1782655 19.6004637,12.5242273 19.1862501,12.5242273 L10.7285002,12.5242273 C10.3142867,12.5242273 9.97850023,12.8701891 9.97850022,13.2969545 L9.97850022,20.2182727 C9.97850029,21.6348324 8.86414637,22.7833006 7.48925026,22.7837273 L6.91475026,22.7837273 C6.40679702,22.7837273 5.91965918,22.5757761 5.56055234,22.2056424 C5.2014455,21.8355086 4.99980133,21.3335276 5.00000015,20.8101818 L5.00000015,20.6131364 C5.00000015,19.6808409 5.69650465,18.917313 6.58216175,18.8432909 L6.72350028,18.8374091 C7.67525027,18.8374091 8.44700026,18.0422727 8.44700024,17.0616818 L8.44700024,8.54545454 C8.44700024,7.69192357 9.11857311,7 9.94700022,7 L21.5000001,7 Z" id="形状结合" fill="#01C1B5" fill-rule="nonzero"></path>
-                <g id="编组备份" transform="translate(18.000000, 10.000000)"></g>
-            </g>
-        </g>
-    </g>
-</svg>

src/page-gym/header-top/image/icon-pause.svg

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="34px" height="34px" viewBox="0 0 34 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>编组 5备份 7</title>
-    <g id="云教练2版" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="画板" transform="translate(-346.000000, -117.000000)">
-            <g id="编组-5备份-7" transform="translate(348.000000, 119.000000)">
-                <rect id="矩形" stroke="#8EE1DC" stroke-width="2" fill="#FFFFFF" x="-1" y="-1" width="32" height="32" rx="12"></rect>
-                <path d="M11.6428571,10 C12.4712843,10 13.1428571,10.6715729 13.1428571,11.5 L13.1428571,19.5 C13.1428571,20.3284271 12.4712843,21 11.6428571,21 L11.5,21 C10.6715729,21 10,20.3284271 10,19.5 L10,11.5 C10,10.6715729 10.6715729,10 11.5,10 L11.6428571,10 Z M18.5,10 C19.3284271,10 20,10.6715729 20,11.5 L20,19.5 C20,20.3284271 19.3284271,21 18.5,21 L18.3571429,21 C17.5287157,21 16.8571429,20.3284271 16.8571429,19.5 L16.8571429,11.5 C16.8571429,10.6715729 17.5287157,10 18.3571429,10 L18.5,10 Z" id="形状结合备份" fill="#2DC7AA"></path>
-            </g>
-        </g>
-    </g>
-</svg>

src/page-gym/header-top/image/icon-play.svg

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="34px" height="34px" viewBox="0 0 34 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>编组 5备份 6</title>
-    <g id="云教练2版" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="画板" transform="translate(-308.000000, -117.000000)">
-            <g id="编组-5备份-6" transform="translate(310.000000, 119.000000)">
-                <rect id="矩形" stroke="#8EE1DC" stroke-width="2" fill="#FFFFFF" x="-1" y="-1" width="32" height="32" rx="12"></rect>
-                <path d="M20.6455278,14.4055419 L12.1044498,9.10418309 C11.6258549,8.80966315 11,9.17781308 11,9.73003795 L11,20.3327556 C11,20.8849805 11.6258549,21.2531304 12.1044498,20.9586104 L20.6087128,15.6572516 C21.1241227,15.3995467 21.1241227,14.6632469 20.6455278,14.4055419 Z" id="路径" fill="#01C1B5" fill-rule="nonzero"></path>
-            </g>
-        </g>
-    </g>
-</svg>

src/page-gym/header-top/index.tsx

@@ -5,7 +5,7 @@ import iconBack from "./image/icon-back.svg";
 import Title from "./title";
 import state, { handleChangeSection, handleResetPlay, togglePlay } from "../../state";
 import { headImg } from "./image";
-import { useRect } from "@vant/use";
+import icons from './image/headerTop.json'
 import { Badge, Circle, Popover } from "vant";
 import { metronomeData } from "../../helpers/metronome";
 import Speed from "./speed";
@@ -19,6 +19,9 @@ export default defineComponent({
 	setup() {
 		const headRef = ref();
 
+		const toggleEvaluat = () => {
+			state.modeType = state.modeType === 'evaluating' ? 'practise' : 'evaluating'
+		}
 		return () => (
 			<div ref={headRef} class={styles.headerTop}>
 				<div class={styles.back}>
@@ -27,8 +30,8 @@ export default defineComponent({
 				<Title text={state.examSongName} />
 
 				<div class={styles.headRight}>
-					<div class={styles.btn} id="tips-step-2">
-						<img class={styles.iconBtn} src={headImg("icon-evaluating.svg")} />
+					<div class={styles.btn} id="tips-step-2" onClick={toggleEvaluat}>
+						<img class={styles.iconBtn} src={state.modeType === 'evaluating' ? icons.evaluating2 : icons.evaluating} />
 						{/* <Button class={styles.button} icon={runtime.evaluatingStatus ? Icons.evaluating2 : Icons.evaluating} disabled={(this.isAppPlay ? !state.activeDetail?.midiUrl || state.midiPlayIniting : !(runtime.songs.background || runtime.songs.music)) || isHomework || !state.enableEvaluation} onClick={this.authBefore("evaluating", this.evaluating)} /> */}
 						<span>评测</span>
 					</div>
@@ -39,8 +42,7 @@ export default defineComponent({
 					</div>
 					<div class={styles.btn} id="tips-step-5" onClick={() => togglePlay()}>
 						<div class={styles.btnWrap}>
-							<img style={{ marginTop: "-1px", display: state.playState === "paused" ? "block" : "none" }} class={styles.iconBtn} src={headImg("icon-play.svg")} />
-							<img style={{ marginTop: "-1px", display: state.playState !== "paused" ? "block" : "none" }} class={styles.iconBtn} src={headImg("icon-pause.svg")} />
+							<img style={{ marginTop: "-1px" }} class={styles.iconBtn} src={ state.playState === "paused" ? icons.play : icons.pause} />
 							<Circle class={styles.progress} stroke-width={80} currentRate={state.playProgress} rate={100} layerColor="#01C1B5" color="#FFC830" />
 						</div>
 						<span>{state.playState === "play" ? "暂停" : "播放"}</span>
@@ -52,8 +54,7 @@ export default defineComponent({
 							state.playSource = state.playSource === "music" ? "background" : "music";
 						}}
 					>
-						<img style={{ display: state.playSource === "music" ? "block" : "none" }} class={styles.iconBtn} src={headImg("icon-music.svg")} />
-						<img style={{ display: state.playSource !== "music" ? "block" : "none" }} class={styles.iconBtn} src={headImg("icon-background.svg")} />
+						<img class={styles.iconBtn} src={state.playSource === "music" ? icons.music : icons.background } />
 						<span>{state.playSource === "music" ? "原声" : "伴奏"}</span>
 					</div>
 					<div

src/page-gym/header-top/speed/index.tsx

@@ -2,7 +2,7 @@ import { defineComponent, reactive, ref, watch } from "vue";
 import { Button, Slider } from "vant";
 import styles from "./index.module.less";
 import { headImg } from "../image";
-import state, { handleSetPlaybackRate } from "../../../state";
+import state, { handleSetSpeed } from "../../../state";
 import { useClickAway } from "@vant/use";
 import { headData } from "..";
 
@@ -22,10 +22,7 @@ export default defineComponent({
 		};
 
 		watch(() => speed.value, () => {
-			const playbackRate = speed.value / state.originSpeed
-			// console.log(state.originSpeed, state.speed)
-			state.speed = speed.value
-			handleSetPlaybackRate(playbackRate)
+			handleSetSpeed(speed.value)
 		})
 
 		const speedRef = ref();

src/page-gym/theme.css

@@ -1,3 +1,6 @@
 :root{
     --van-primary-color: #01c1b5;
+}
+.vf-StaveSection{
+    display: none;
 }

src/state.ts

@@ -35,9 +35,9 @@ const state = reactive({
 	parentCategoriesId: 0,
 	/** 资源类型: mp3 | midi */
 	playMode: "MP3",
-	/** 后台设置速度 */
+	/** 设置的速度 */
 	speed: 0,
-	/** 记录设置的速度 */
+	/** 曲谱音频正常的速度 */
 	originSpeed: 0,
 	/** 分轨名称 */
 	track: "",
@@ -77,10 +77,31 @@ const state = reactive({
 	sectionFirst: null as any,
 	/** 音符数据 */
 	times: [] as any[],
-	/** 重复自动播放 */
-	repeatAutoPlay: true,
 	/** 播放模式 */
 	modeType: "practise" as "practise" | "follow" | "evaluating",
+	/** 设置 */
+	setting: {
+		/** 效音提醒 */
+		soundEffect: false,
+		/** 护眼模式 */
+		eyeProtection: false,
+		/** 摄像头 */
+		camera: false,
+		/** 循环播放 */
+		repeatAutoPlay: true,
+		/** 显示指法 */
+		displayFingering: false,
+		/** 显示光标 */
+		displayCursor: true,
+		/** 频率 */
+		frequency: '442',
+		/** 评测难度 */
+		evaluationDifficulty: '',
+		/** 保存到相册 */
+		saveToAlbum: false,
+		/** 开启伴奏 */
+		enableAccompaniment: false
+	},
 
 	repeatedBeats: 0,
 
@@ -222,7 +243,7 @@ const handleStopPlay = () => {
 	state.backgroundEl?.pause();
 	skipNotePlay(0);
 	// 重复自动播放如果为开启,自动开始播放, 且是练习模式
-	if (state.repeatAutoPlay && state.modeType === "practise") {
+	if (state.setting.repeatAutoPlay && state.modeType === "practise") {
 		scrollViewNote();
 		setTimeout(() => {
 			togglePlay("play");
@@ -292,13 +313,14 @@ export const handleResetPlay = () => {
 	skipNotePlay(0);
 };
 /** 设置速度 */
-export const handleSetPlaybackRate = (playbackRate: number) => {
-	if (state.songEl) {
-		state.songEl.playbackRate = playbackRate;
-	}
-	if (state.backgroundEl) {
-		state.backgroundEl.playbackRate = playbackRate;
-	}
+export const handleSetSpeed = (speed: number) => {
+	state.speed = speed
+	const playbackRate = speed / state.originSpeed
+	console.log("🚀 ~ playbackRate:", speed , state.originSpeed)
+
+	// 按照比例设置速度
+	state.songEl && (state.songEl.playbackRate = playbackRate);
+	state.backgroundEl && (state.backgroundEl.playbackRate = playbackRate);
 };
 /** 清除选段状态 */
 export const clearSelection = () => {

src/view/music-score/index.tsx

@@ -26,9 +26,9 @@ export default defineComponent({
 			const osmd = new OpenSheetMusicDisplay(container, {
 				drawTitle: false,
 				drawSubtitle: false,
-				drawMeasureNumbers: false,
+				// drawMeasureNumbers: false,
 				autoResize: false,
-				// followCursor: false,
+				followCursor: false,
 				drawPartNames: false, // 是否渲染声部
 				drawComposer: false, // 渲染作者
 				// autoBeam: true,

src/view/plugins/measure-speed/index.tsx

@@ -0,0 +1,35 @@
+import { defineComponent, reactive, ref, watch } from "vue";
+import state, { handleSetSpeed } from "/src/state";
+
+export default defineComponent({
+	name: "measureSpeed",
+	setup() {
+		const isSelected = ref(false);
+		const recordSpeed = reactive({
+			speed: state.speed,
+			originSpeed: state.originSpeed
+		}) 
+		watch(
+			() => state.section.length,
+			() => {
+				// 选段
+				if (!isSelected.value && state.section.length === 2) {
+					// console.log("设置选段速度");
+					isSelected.value = true;
+					recordSpeed.speed = state.speed;
+					const beatSpeed = state.section[0].beatSpeed;
+					state.originSpeed = beatSpeed
+					handleSetSpeed(beatSpeed)
+				}
+				// 设置过基准速度
+				if (isSelected.value && state.section.length === 0) {
+					// console.log("还原速度");
+					isSelected.value = false;
+					state.originSpeed = recordSpeed.originSpeed
+					handleSetSpeed(recordSpeed.speed)
+				}
+			}
+		);
+		return () => <div></div>;
+	},
+});

src/view/selection/index.tsx

@@ -21,11 +21,10 @@ export default defineComponent({
 				const item = notes[i];
 				// console.log("🚀 ~ item:", item)
 				const noteItem = {
+					...item,
 					index: item.i,
-					MeasureNumberXML: item.MeasureNumberXML,
 					bbox: null as any,
 					staveBox: null as any,
-					isRestFlag: item.isRestFlag, // 是否休止符
 				};
 				if (!notesList.includes(item.noteId)) {
 					if (item.svgElement) {