feat: 增加简谱类型的评测报告

src/helpers/formateMusic.ts

@@ -970,7 +970,7 @@ export const formateTimes = (osmd: OpenSheetMusicDisplay) => {
 
 			// console.log(note.tie)
 			// console.log(relaEndtime, fixtime, '时间',measureLength)
-			console.log('频率',note?.pitch?.frequency,i)
+			// console.log('频率',note?.pitch?.frequency,i)
 			const nodeDetail = {
 				isStaccato: note.voiceEntry.isStaccato(),
 				isRestFlag: note.isRestFlag,

src/page-instrument/view-evaluat-report/component/note/bottomArrow.tsx

@@ -0,0 +1,17 @@
+import { defineComponent } from "vue";
+
+export default defineComponent({
+	name: "ArrowSvg",
+	props: {
+		fill: String,
+	},
+	render() {
+		return (
+			<svg id="bottomSvg" width="15px" height="10px" viewBox="0 0 10 7" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+				<g id="页面-223" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+					<path d="M1.61932444,0 L8.38067556,0 C8.84091285,1.06606835e-15 9.2140089,0.373096042 9.2140089,0.833333333 C9.2140089,1.00701915 9.15973962,1.17636453 9.05878679,1.31769849 L5.67811123,6.05064428 C5.41060373,6.42515477 4.89014533,6.51189784 4.51563484,6.24439035 C4.44080524,6.19094063 4.37533849,6.12547388 4.32188877,6.05064428 L0.941213211,1.31769849 C0.673705719,0.943188006 0.760448786,0.422729599 1.13495928,0.155222107 C1.27629324,0.0542692786 1.44563862,-3.01161341e-16 1.61932444,0 Z" id="下" fill="#FF9200" transform="translate(5.000000, 3.500000) scale(1, -1) rotate(-180.000000) translate(-5.000000, -3.500000) "></path>
+				</g>
+			</svg>
+		);
+	},
+});

src/page-instrument/view-evaluat-report/component/note/leftArrow.tsx

@@ -0,0 +1,17 @@
+import { defineComponent } from "vue";
+
+export default defineComponent({
+	name: "ArrowSvg",
+	props: {
+		fill: String,
+	},
+	render() {
+		return (
+			<svg id="leftSvg" width="15px" height="10px" viewBox="0 0 10 7" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+				<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+					<path d="M0.119324437,1.5 L6.88067556,1.5 C7.34091285,1.5 7.7140089,1.87309604 7.7140089,2.33333333 C7.7140089,2.50701915 7.65973962,2.67636453 7.55878679,2.81769849 L4.17811123,7.55064428 C3.91060373,7.92515477 3.39014533,8.01189784 3.01563484,7.74439035 C2.94080524,7.69094063 2.87533849,7.62547388 2.82188877,7.55064428 L-0.558786789,2.81769849 C-0.826294281,2.44318801 -0.739551214,1.9227296 -0.365040725,1.65522211 C-0.223706765,1.55426928 -0.0543613774,1.5 0.119324437,1.5 Z" id="左" fill="#FF9200" transform="translate(3.500000, 5.000000) scale(-1, -1) rotate(-90.000000) translate(-3.500000, -5.000000) "></path>
+				</g>
+			</svg>
+		);
+	},
+});

src/page-instrument/view-evaluat-report/component/note/rightArrow.tsx

@@ -0,0 +1,17 @@
+import { defineComponent } from "vue";
+
+export default defineComponent({
+	name: "ArrowSvg",
+	props: {
+		fill: String,
+	},
+	render() {
+		return (
+			<svg id="rightSvg" width="15px" height="10px" viewBox="0 0 10 7" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+				<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+					<path d="M0.119324437,1.5 L6.88067556,1.5 C7.34091285,1.5 7.7140089,1.87309604 7.7140089,2.33333333 C7.7140089,2.50701915 7.65973962,2.67636453 7.55878679,2.81769849 L4.17811123,7.55064428 C3.91060373,7.92515477 3.39014533,8.01189784 3.01563484,7.74439035 C2.94080524,7.69094063 2.87533849,7.62547388 2.82188877,7.55064428 L-0.558786789,2.81769849 C-0.826294281,2.44318801 -0.739551214,1.9227296 -0.365040725,1.65522211 C-0.223706765,1.55426928 -0.0543613774,1.5 0.119324437,1.5 Z" id="右" fill="#FF9200" transform="translate(3.500000, 5.000000) scale(1, -1) rotate(-90.000000) translate(-3.500000, -5.000000) "></path>
+				</g>
+			</svg>
+		);
+	},
+});

src/page-instrument/view-evaluat-report/component/note/topArrow.tsx

@@ -0,0 +1,17 @@
+import { defineComponent } from "vue";
+
+export default defineComponent({
+	name: "ArrowSvg",
+	props: {
+		fill: String,
+	},
+	render() {
+		return (
+			<svg id="topSvg" width="15px" height="10px" viewBox="0 0 10 7" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+				<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+					<path d="M1.61932444,0 L8.38067556,0 C8.84091285,1.06606835e-15 9.2140089,0.373096042 9.2140089,0.833333333 C9.2140089,1.00701915 9.15973962,1.17636453 9.05878679,1.31769849 L5.67811123,6.05064428 C5.41060373,6.42515477 4.89014533,6.51189784 4.51563484,6.24439035 C4.44080524,6.19094063 4.37533849,6.12547388 4.32188877,6.05064428 L0.941213211,1.31769849 C0.673705719,0.943188006 0.760448786,0.422729599 1.13495928,0.155222107 C1.27629324,0.0542692786 1.44563862,-3.01161341e-16 1.61932444,0 Z" id="上" fill="#FF9200" transform="translate(5.000000, 3.500000) scale(1, -1) translate(-5.000000, -3.500000) "></path>
+				</g>
+			</svg>
+		);
+	},
+});

src/page-instrument/view-evaluat-report/component/share-top/image/first-bottom.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="19px" viewBox="0 0 12 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 15</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="评测报告（音准）" transform="translate(-385.000000, -94.000000)" fill="#FF9200">
+            <g id="编组-9" transform="translate(283.000000, 82.000000)">
+                <g id="编组-11备份" transform="translate(102.000000, 11.000000)">
+                    <g id="编组-15" transform="translate(0.000000, 1.000000)">
+                        <rect id="矩形" x="0" y="0" width="12" height="12" rx="3"></rect>
+                        <path d="M3.56703087,14 L8.43296913,14 C8.73979399,14 8.98852469,14.2487307 8.98852469,14.5555556 C8.98852469,14.6695401 8.9534638,14.780766 8.88809798,14.8741457 L6.45512884,18.3498159 C6.27917634,18.6011767 5.93277053,18.6623071 5.68140981,18.4863546 C5.62827574,18.4491607 5.582065,18.40295 5.54487116,18.3498159 L3.11190202,14.8741457 C2.93594952,14.622785 2.99707996,14.2763792 3.24844068,14.1004267 C3.34182042,14.0350609 3.45304637,14 3.56703087,14 Z" id="矩形" transform="translate(6.000000, 16.500000) scale(1, -1) rotate(-180.000000) translate(-6.000000, -16.500000) "></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/page-instrument/view-evaluat-report/component/share-top/image/first-correct.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="12px" viewBox="0 0 12 12" 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="评测报告（节奏）" transform="translate(-557.000000, -94.000000)" fill="#2ABC6F">
+            <g id="编组-9" transform="translate(355.000000, 82.000000)">
+                <g id="编组-10" transform="translate(202.000000, 11.000000)">
+                    <rect id="矩形" x="0" y="1" width="12" height="12" rx="3"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/page-instrument/view-evaluat-report/component/share-top/image/first-error.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="12px" viewBox="0 0 12 12" 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="评测报告（节奏）" transform="translate(-643.000000, -94.000000)" fill="#FF2B29">
+            <g id="编组-9" transform="translate(355.000000, 82.000000)">
+                <g id="编组-10备份-3" transform="translate(288.000000, 11.000000)">
+                    <rect id="矩形" x="0" y="1" width="12" height="12" rx="3"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/page-instrument/view-evaluat-report/component/share-top/image/first-lack.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="12px" viewBox="0 0 12 12" 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="评测报告（音准）" transform="translate(-643.000000, -94.000000)" fill="#8F4EFB">
+            <g id="编组-9" transform="translate(283.000000, 82.000000)">
+                <g id="编组-4" transform="translate(360.000000, 11.000000)">
+                    <rect id="矩形" x="0" y="1" width="12" height="12" rx="3"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/page-instrument/view-evaluat-report/component/share-top/image/first-left.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="19px" height="12px" viewBox="0 0 19 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 13</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="评测报告（节奏）" transform="translate(-371.000000, -94.000000)" fill="#FF9200">
+            <g id="编组-9" transform="translate(355.000000, 82.000000)">
+                <g id="编组-11备份" transform="translate(16.000000, 11.000000)">
+                    <g id="编组-13" transform="translate(0.000000, 1.000000)">
+                        <path d="M0.0670308675,3.5 L4.93296913,3.5 C5.23979399,3.5 5.48852469,3.74873069 5.48852469,4.05555556 C5.48852469,4.16954006 5.4534638,4.280766 5.38809798,4.37414575 L2.95512884,7.84981594 C2.77917634,8.10117666 2.43277053,8.16230709 2.18140981,7.98635459 C2.12827574,7.94916074 2.082065,7.90295 2.04487116,7.84981594 L-0.388097977,4.37414575 C-0.564050481,4.12278503 -0.502920044,3.77637921 -0.251559324,3.60042671 C-0.158179581,3.53506089 -0.0469536347,3.5 0.0670308675,3.5 Z" id="矩形" transform="translate(2.500000, 6.000000) scale(1, -1) rotate(-270.000000) translate(-2.500000, -6.000000) "></path>
+                        <rect id="矩形" x="7" y="0" width="12" height="12" rx="3"></rect>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/page-instrument/view-evaluat-report/component/share-top/image/first-not.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="12px" viewBox="0 0 12 12" 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="评测报告（节奏）" transform="translate(-729.000000, -94.000000)" fill="#ADADAD">
+            <g id="编组-9" transform="translate(355.000000, 82.000000)">
+                <g id="编组-10备份" transform="translate(374.000000, 11.000000)">
+                    <rect id="矩形" x="0" y="1" width="12" height="12" rx="3"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/page-instrument/view-evaluat-report/component/share-top/image/first-right.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="19px" height="12px" viewBox="0 0 19 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 12</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="评测报告（节奏）" transform="translate(-464.000000, -94.000000)" fill="#FF9200">
+            <g id="编组-9" transform="translate(355.000000, 82.000000)">
+                <g id="编组-11" transform="translate(109.000000, 11.000000)">
+                    <g id="编组-12" transform="translate(0.000000, 1.000000)">
+                        <path d="M14.0670309,3.5 L18.9329691,3.5 C19.239794,3.5 19.4885247,3.74873069 19.4885247,4.05555556 C19.4885247,4.16954006 19.4534638,4.280766 19.388098,4.37414575 L16.9551288,7.84981594 C16.7791763,8.10117666 16.4327705,8.16230709 16.1814098,7.98635459 C16.1282757,7.94916074 16.082065,7.90295 16.0448712,7.84981594 L13.611902,4.37414575 C13.4359495,4.12278503 13.49708,3.77637921 13.7484407,3.60042671 C13.8418204,3.53506089 13.9530464,3.5 14.0670309,3.5 Z" id="矩形" transform="translate(16.500000, 6.000000) scale(1, -1) rotate(-90.000000) translate(-16.500000, -6.000000) "></path>
+                        <rect id="矩形" x="0" y="0" width="12" height="12" rx="3"></rect>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/page-instrument/view-evaluat-report/component/share-top/image/first-top.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="19px" viewBox="0 0 12 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 13</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="评测报告（音准）" transform="translate(-299.000000, -87.000000)" fill="#FF9200">
+            <g id="编组-9" transform="translate(283.000000, 82.000000)">
+                <g id="编组-13" transform="translate(16.000000, 5.000000)">
+                    <rect id="矩形" x="0" y="7" width="12" height="12" rx="3"></rect>
+                    <path d="M3.56703087,0 L8.43296913,0 C8.73979399,7.10712233e-16 8.98852469,0.248730695 8.98852469,0.555555556 C8.98852469,0.669540058 8.9534638,0.780766004 8.88809798,0.874145747 L6.45512884,4.34981594 C6.27917634,4.60117666 5.93277053,4.66230709 5.68140981,4.48635459 C5.62827574,4.44916074 5.582065,4.40295 5.54487116,4.34981594 L3.11190202,0.874145747 C2.93594952,0.622785027 2.99707996,0.276379215 3.24844068,0.100426711 C3.34182042,0.035060891 3.45304637,4.65027823e-16 3.56703087,0 Z" id="矩形" transform="translate(6.000000, 2.500000) scale(1, -1) translate(-6.000000, -2.500000) "></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/page-instrument/view-evaluat-report/component/share-top/image/icon-back.svg

@@ -2,8 +2,10 @@
 <svg width="15px" height="24px" viewBox="0 0 15 24" 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="评测报告（音准）" transform="translate(-40.000000, -27.000000)" fill="#494949" fill-rule="nonzero" stroke="#494949">
-            <path d="M42.2681508,37.7499394 C42.5890877,37.7499394 42.9114702,37.8699082 43.168798,38.0950183 L53.620931,47.6520856 C53.8607785,47.8704624 53.997204,48.1690827 53.9999596,48.4816468 C54.0026326,48.7942108 53.8714111,49.0948519 53.6353876,49.3168215 C53.138464,49.7783404 52.3366638,49.7837362 51.8326476,49.3289532 L41.379069,39.7718859 C41.1392215,39.5535091 41.002796,39.2548888 41.0000404,38.9423247 C40.9973673,38.6297606 41.1285889,38.3291196 41.3646123,38.1071499 C41.5948722,37.8710256 41.9246144,37.7409471 42.2667051,37.7512873 L42.2681508,37.7499394 Z M52.7106158,28 C53.0356188,28 53.3591643,28.117702 53.6185837,28.3424057 C53.8599334,28.5590403 53.9971822,28.8550613 53.9999596,29.1648752 C54.0026536,29.474689 53.8706502,29.7727125 53.6331578,29.9929083 L43.1980856,39.5695682 C42.6976948,40.027014 41.8904764,40.0329595 41.3821498,39.5829434 C41.1403528,39.3662582 41.0028184,39.0699512 41.0000404,38.7598084 C40.9973456,38.4496656 41.1296337,38.1513535 41.3675757,37.9311033 L51.8026479,28.3544434 C52.0474932,28.117702 52.3856129,28 52.7106158,28 Z" id="形状"></path>
+        <g id="评测报告（音准）" transform="translate(-23.000000, -23.000000)" fill="#494949" fill-rule="nonzero" stroke="#494949">
+            <g id="编组-14">
+                <path d="M25.2681508,33.7499394 C25.5890877,33.7499394 25.9114702,33.8699082 26.168798,34.0950183 L36.620931,43.6520856 C36.8607785,43.8704624 36.997204,44.1690827 36.9999596,44.4816468 C37.0026326,44.7942108 36.8714111,45.0948519 36.6353876,45.3168215 C36.138464,45.7783404 35.3366638,45.7837362 34.8326476,45.3289532 L24.379069,35.7718859 C24.1392215,35.5535091 24.002796,35.2548888 24.0000404,34.9423247 C23.9973673,34.6297606 24.1285889,34.3291196 24.3646123,34.1071499 C24.5948722,33.8710256 24.9246144,33.7409471 25.2667051,33.7512873 L25.2681508,33.7499394 Z M35.7106158,24 C36.0356188,24 36.3591643,24.117702 36.6185837,24.3424057 C36.8599334,24.5590403 36.9971822,24.8550613 36.9999596,25.1648752 C37.0026536,25.474689 36.8706502,25.7727125 36.6331578,25.9929083 L26.1980856,35.5695682 C25.6976948,36.027014 24.8904764,36.0329595 24.3821498,35.5829434 C24.1403528,35.3662582 24.0028184,35.0699512 24.0000404,34.7598084 C23.9973456,34.4496656 24.1296337,34.1513535 24.3675757,33.9311033 L34.8026479,24.3544434 C35.0474932,24.117702 35.3856129,24 35.7106158,24 Z" id="形状"></path>
+            </g>
         </g>
     </g>
 </svg>

src/page-instrument/view-evaluat-report/component/share-top/image/icon-shiyi.svg

@@ -2,10 +2,10 @@
 <svg width="33px" height="33px" viewBox="0 0 33 33" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>button-normal备份 2</title>
     <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="评测报告（音准）" transform="translate(-690.000000, -13.000000)">
-            <g id="button-normal备份-2" transform="translate(690.000000, 13.000000)">
-                <rect id="button-normal" fill="#FFEFE5" x="0" y="0" width="33" height="33" rx="16.5"></rect>
-                <g id="编组" transform="translate(7.000000, 7.000000)" fill="#FF8800" fill-rule="nonzero" stroke="#FF8800">
+        <g id="评测报告（音准）" transform="translate(-755.000000, -11.000000)">
+            <g id="button-normal备份-2" transform="translate(755.000000, 11.000000)">
+                <rect id="button-normal" fill="#FFE5E7" x="0" y="0" width="33" height="33" rx="16.5"></rect>
+                <g id="编组" transform="translate(7.000000, 7.000000)" fill="#FF6173" fill-rule="nonzero" stroke="#FF6173">
                     <path d="M9.5,0 C4.25322823,0 0,4.25324263 0,9.5 C0,14.7467574 4.25324678,19 9.5,19 C14.7467532,19 19,14.7467574 19,9.5 C19,4.25324263 14.7467347,0 9.5,0 Z M9.49999096,17.5000093 C5.08224075,17.5000093 1.50001028,13.9181622 1.50001028,9.50000928 C1.50001028,5.08182021 5.08222266,1.50000928 9.49999096,1.50000928 C13.9185552,1.50000928 17.4999897,5.08182019 17.4999897,9.50000928 C17.4999897,13.9181622 13.9185552,17.5000093 9.49999096,17.5000093 Z" id="形状"></path>
                     <path d="M9.60242663,4.40820056 C8.69574736,4.40820056 7.97469307,4.6677898 7.4389318,5.18715088 C6.90315395,5.69822914 6.63526502,6.415299 6.63526502,7.33837705 L8.04487302,7.33837705 C8.04487302,6.81089915 8.14788552,6.40699959 8.35389392,6.12666179 C8.58443543,5.78879242 8.97191911,5.61974983 9.51601299,5.61974983 C9.94462863,5.61974983 10.2743981,5.73539395 10.5053048,5.96591863 C10.7358463,6.21324134 10.8512913,6.53471105 10.8512913,6.9303112 C10.8512913,7.24366409 10.739996,7.53608583 10.5173721,7.8081242 L10.3691112,7.9813165 C9.56127805,8.69838636 9.0790813,9.22189715 8.9224877,9.55148369 C8.75761128,9.87295341 8.67534734,10.2768696 8.67534736,10.763033 L8.67534736,10.9362087 L10.0970393,10.9362087 L10.0970393,10.763033 C10.0970393,10.4745617 10.1589364,10.2066731 10.2826809,9.95935037 C10.3977774,9.72050967 10.5626538,9.51431889 10.7769782,9.34134239 C11.3538881,8.83856355 11.7085558,8.51294411 11.8402179,8.36446749 C12.1450891,7.96075053 12.2978816,7.45383858 12.2978816,6.84373165 C12.2978816,6.08551327 12.050791,5.49202176 11.5561285,5.06338994 C11.0697654,4.62665788 10.4185259,4.40820056 9.60242663,4.40820056 Z M8.69988046,12.8015559 C8.51877034,12.9747482 8.42784181,13.1971561 8.42784181,13.4692111 C8.42784181,13.7412494 8.51877034,13.9638565 8.69988046,14.1368496 C8.8979878,14.3183413 9.1243464,14.4088879 9.38018456,14.4088879 C9.6522066,14.4088879 9.87859838,14.3223084 10.0600737,14.1493153 C10.2494998,13.976123 10.3445946,13.7495489 10.3445946,13.4692111 C10.3445946,13.2056547 10.2536329,12.9830477 10.0725228,12.8015559 C9.89104754,12.6285628 9.66015745,12.5419667 9.38018456,12.5419667 C9.11606357,12.5419667 8.88967177,12.6285628 8.69988046,12.8015559 Z" id="形状"></path>
                 </g>

src/page-instrument/view-evaluat-report/component/share-top/index.module.less

@@ -5,7 +5,7 @@
     width: 100%;
     height: 100%;
     flex-shrink: 0;
-    padding: 8px 10px;
+    padding: 10px 22px;
     background-color: #fff;
 }
 
@@ -17,7 +17,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    padding: 0 30px;
+    padding-right: 14px;
     height: 100%;
 
     img {
@@ -27,12 +27,26 @@
     }
 }
 .disabled{
-    opacity: 0;
+    //opacity: 0;
     pointer-events: none;
 }
 .left {
     display: flex;
     align-items: center;
+    .leftContent {
+        .lcName {
+            font-size: 18px;
+            font-weight: 400;
+            color: #000;
+            line-height: 25px;
+            margin-bottom: 2px;
+        }
+        .lcScore {
+            font-size: 12px;
+            color: #777777;
+            line-height: 18px;
+        }
+    }
 }
 
 .center {
@@ -77,6 +91,41 @@
     }
 }
 
+.middle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .cItem {
+        width: 64px;
+        height: 50px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-between;
+        padding: 4px 0;
+        margin: 0 6px;
+        cursor: pointer;
+        .mScore {
+            font-size: 16px;
+            line-height: 22px;
+            color: #AAAAAA;
+        }
+        .mLabel {
+            font-size: 12px;
+            line-height: 18px;
+            color: #AAAAAA;
+        }
+    }
+    .active {
+        background: #CBEEFF;
+        border-radius: 8px;
+        .mScore, .mLabel {
+            color: #000000;
+            font-size: 500;
+        }
+    }
+}
+
 .right {
     display: flex;
     align-items: center;
@@ -161,16 +210,17 @@
     display: flex;
     justify-content: flex-end;
     align-items: center;
-    height: 36px;
-    padding: 0 14px;
+    padding: 0 16px;
+    height: 30px;
     border-radius: 18px;
     background-color: rgba(255,255,255, .9);
     z-index: 1;
+    box-sizing: content-box;
 
     &>div {
         display: flex;
         align-items: center;
-        margin-right: 6px;
+        margin-right: 16px;
 
         &>span {
             margin-left: 4px;
@@ -184,6 +234,14 @@
     width: 80vw;
     max-width: 420px;
     padding: 20px;
+    position: relative;
+    .shiyiTop {
+        position: absolute;
+        width: 154px;
+        left: 50%;
+        top: -6px;
+        transform: translateX(-50%);
+    }
 }
 .shiyiTitle{
     font-size: 16px;
@@ -194,6 +252,7 @@
 .items {
     display: flex;
     flex-wrap: wrap;
+    margin-top: 16px;
     .item{
         width: 50%;
         display: flex;
@@ -201,9 +260,46 @@
         padding: 7px 0;
         span{
             margin-left: 12px;
+            font-size: 12px;
+            font-weight: 400;
         }
         svg {
             visibility: visible;
         }
     }
+    .itemTone {
+        width: 50%;
+        display: flex;
+        align-items: center;
+        padding: 7px 0 7px 26px;
+        position: relative;
+        &:nth-child(2n) {
+            transform: translateX(20px);
+        }
+        .firstIcon1 {
+            width: 12px;
+            height: 20px;
+        }
+        .firstIcon2 {
+            width: 19px;
+            height: 13px;
+        }
+        .firstIcon3 {
+            width: 12px;
+            height: 13px;
+        }
+        img {
+            position: absolute;
+            left: 0;
+            top: 50%;
+            transform: translateY(-50%);
+        }
+        .fiz {
+            left: -5px;
+        }
+        span {
+            font-size: 12px;
+            font-weight: 400;
+        }
+    }
 }

src/page-instrument/view-evaluat-report/component/share-top/index.tsx

@@ -6,6 +6,15 @@ import state from "/src/state";
 import iconBack from "./image/icon-back.svg";
 import iconShiyi from "./image/icon-shiyi.svg";
 import iconhuifang from "./image/icon-huifang.svg";
+import shiyiTop from "./image/shiyi-top.png";
+import firstLeft from "./image/first-left.svg";
+import firstRight from "./image/first-right.svg";
+import firstTop from "./image/first-top.svg";
+import firstBottom from "./image/first-bottom.svg";
+import firstCorrect from "./image/first-correct.svg";
+import firstError from "./image/first-error.svg";
+import firstNot from "./image/first-not.svg";
+import firstLack from "./image/first-lack.svg";
 import { Grid, GridItem, Popup } from "vant";
 import videobg from "./image/videobg.png";
 import "plyr/dist/plyr.css";
@@ -73,10 +82,47 @@ export default defineComponent({
 		};
 		return () => (
 			<div class={[styles.headerTop, browserInfo.android && styles.android]}>
-				<div class={[styles.back, !storeData.isApp && styles.disabled]} onClick={handleBack}>
-					<img src={iconBack} />
+				<div class={styles.left}>
+					<div class={[styles.back, !storeData.isApp && styles.disabled]} onClick={handleBack}>
+						<img src={iconBack} />
+					</div>
+					<div class={styles.leftContent}>
+						<div class={styles.lcName}>{state.examSongName}</div>
+						<div class={styles.lcScore}>{level[scoreData.value.heardLevel]}｜综合分数：{scoreData.value.score}分</div>
+					</div>
+				</div>
+
+				{/* 音准、节奏、完整度纬度 */}
+				
+
+				<div class={styles.middle}>
+					{
+					 	state.isPercussion ? null : 
+						<div 
+							onClick={() => handleChange("intonation")}
+							class={[styles.cItem, itemType.value === "intonation" && styles.active]}>
+							<span class={styles.mScore}>{scoreData.value.intonation}分</span>
+							<span class={styles.mLabel}>音准</span>
+						</div>					 
+					}
+					<div
+						onClick={() => handleChange("cadence")}
+						class={[styles.cItem, itemType.value === "cadence" && styles.active]}>
+						<span class={styles.mScore}>{scoreData.value.cadence}分</span>
+						<span class={styles.mLabel}>节奏</span>
+					</div>
+					{
+						state.isPercussion ? null : 
+						<div						
+							onClick={() => handleChange("integrity")}
+							class={[styles.cItem, itemType.value === "integrity" && styles.active]}>
+							<span class={styles.mScore}>{scoreData.value.integrity}分</span>
+							<span class={styles.mLabel}>完整度</span>
+						</div>
+					}
 				</div>
-				<div class={styles.center}>
+
+				{/* <div class={styles.center}>
 					<div class={styles.cItem}>
 						<div>{level[scoreData.value.heardLevel]}</div>
 						<div>难度</div>
@@ -110,7 +156,8 @@ export default defineComponent({
 							</div>
 						</>
 					)}
-				</div>
+				</div> */}
+
 				<div class={styles.right}>
 					<div
 						style={{ display: scoreData.value.videoFilePath ? "" : "none" }}
@@ -130,48 +177,116 @@ export default defineComponent({
 					</div> */}
 				</div>
 
-				{state.isPercussion ? null : (
-					<div class={styles.demos}>
-						<div>
-							<Note fill="#01C1B5" />
-							<span>演奏正确</span>
-						</div>
-						{itemType.value === "intonation" && (
-							<>
-								<div>
-									<Note fill="rgba(1, 193, 181, .8)" shadowFill="#FFAB25" shadow x={-2} y={0} />
-									<span>音高了</span>
-								</div>
-								<div>
-									<Note fill="rgba(1, 193, 181, .8)" shadowFill="#FFAB25" shadow x={-1} y={-3} />
-									<span>音低了</span>
-								</div>
-							</>
-						)}
-						{itemType.value === "cadence" && (
-							<>
+				{/* 五线谱，简谱类型提示  */}
+				{
+					scoreData.value.musicType === 'staff' ? 
+					<>
+					{state.isPercussion ? null : (
+						<div class={styles.demos}>
+							{itemType.value === "intonation" && (
+								<>
+									<div>
+										<Note fill="rgba(1, 193, 181, .8)" shadowFill="#FFAB25" shadow x={-2} y={0} />
+										<span>演奏偏高</span>
+									</div>
+									<div>
+										<Note fill="rgba(1, 193, 181, .8)" shadowFill="#FFAB25" shadow x={-1} y={-3} />
+										<span>演奏偏低</span>
+									</div>
+								</>
+							)}
+							{itemType.value === "cadence" && (
+								<>
+									<div>
+										<Note fill="rgba(1, 193, 181, .8)" shadowFill="#FFAB25" shadow x={0.5} y={-1} />
+										<span>节奏偏快</span>
+									</div>
+									<div>
+										<Note fill="rgba(1, 193, 181, .8)" shadowFill="#FFAB25" shadow x={-3} y={-2.5} />
+										<span>演奏偏低</span>
+									</div>
+								</>
+							)}		
+							{(itemType.value === "intonation" || itemType.value === "cadence") && (
+								<>										
+									<div>
+										<Note fill="#2ABC6F" />
+										<span>演奏正确</span>
+									</div>
+									<div>
+										<Note fill="#FF2B29" />
+										<span>错音</span>
+									</div>							
+								</>
+							)}
+
+							{(itemType.value === "intonation" || itemType.value === "integrity") && (
 								<div>
-									<Note fill="rgba(1, 193, 181, .8)" shadowFill="#FF4444" shadow x={0.5} y={-1} />
-									<span>节奏过快</span>
+									<Note fill="#8F4EFB" />
+									<span>时值不足</span>
 								</div>
+							)}
+							<div>
+								<Note fill="#ADADAD" />
+								<span>未演奏</span>
+							</div>
+						</div>
+					)}
+					</> : 
+					<>
+					{state.isPercussion ? null : (
+						<div class={styles.demos}>
+							{itemType.value === "intonation" && (
+								<>
+									<div>
+										<img class={styles.firstIcon1} src={firstTop} />
+										<span>演奏偏高</span>
+									</div>
+									<div>
+										<img class={styles.firstIcon1} src={firstBottom} />
+										<span>演奏偏低</span>
+									</div>
+								</>
+							)}	
+							{itemType.value === "cadence" && (
+								<>
+									<div>
+										<img class={styles.firstIcon2} src={firstLeft} />
+										<span>节奏偏快</span>
+									</div>
+									<div>
+										<img class={styles.firstIcon2} src={firstRight} />
+										<span>节奏偏慢</span>
+									</div>
+								</>
+							)}								
+							{(itemType.value === "intonation" || itemType.value === "cadence") && (	
+								<>			
+									<div>
+										<img class={styles.firstIcon3} src={firstCorrect} />
+										<span>演奏正确</span>
+									</div>
+									<div>
+										<img class={styles.firstIcon3} src={firstError} />
+										<span>演奏错误</span>
+									</div>							
+								</>
+							)}
+							{(itemType.value === "intonation" || itemType.value === "integrity") && (
 								<div>
-									<Note fill="rgba(1, 193, 181, .8)" shadowFill="#FF4444" shadow x={-3} y={-2.5} />
-									<span>节奏慢了</span>
+									<img class={styles.firstIcon3} src={firstLack} />
+									<span>时值不足</span>
 								</div>
-							</>
-						)}
-						{itemType.value === "integrity" && (
+							)}
 							<div>
-								<Note fill="#CC75FF" />
-								<span>完成度不足</span>
+								<img class={styles.firstIcon3} src={firstNot} />
+								<span>未演奏</span>
 							</div>
-						)}
-						<div>
-							<Note fill="#AEAEAE" />
-							<span>未演奏</span>
 						</div>
-					</div>
-				)}
+					)}
+					</>							
+				}	
+
 				<Popup
 					teleport="body"
 					class={["popup-custom", "van-scale", styles.popup]}
@@ -214,43 +329,88 @@ export default defineComponent({
 					teleport="body"
 					closeable
 				>
-					<div class={styles.shiyiPopup}>
-						<div class={styles.shiyiTitle}>图标释义</div>
-						<div class={styles.items}>
-							<div class={styles.item}>
-								<Note fill="#01C1B5" />
-								<span>绿色音符：演奏正确</span>
-							</div>
-							<div class={styles.item}>
-								<Note fill="#FF4444" />
-								<span>红色音符：错音</span>
-							</div>
-							<div class={styles.item}>
-								<Note fill="#CC75FF" />
-								<span>紫色音符：完成度不足</span>
-							</div>
-							<div class={styles.item}>
-								<Note fill="#AEAEAE" />
-								<span>灰色音符：未演奏</span>
-							</div>
-							<div class={styles.item}>
-								<Note fill="rgba(1, 193, 181, .8)" shadowFill="#FF4444" shadow x={0.5} y={-1} />
-								<span>音符重影(红色在前)：节奏过快</span>
-							</div>
-							<div class={styles.item}>
-								<Note fill="rgba(1, 193, 181, .8)" shadowFill="#FF4444" shadow x={-3} y={-2.5} />
-								<span>音符重影(红色在后)：节奏慢了</span>
-							</div>
-							<div class={styles.item}>
-								<Note fill="rgba(1, 193, 181, .8)" shadowFill="#FFAB25" shadow x={-2} y={0} />
-								<span>音符重影(黄色在上)：音高了</span>
+					{scoreData.value.musicType === 'staff' ?
+						<div class={styles.shiyiPopup}>
+							<img class={styles.shiyiTop} src={shiyiTop} />
+							<div class={styles.items}>
+								<div class={styles.item}>
+									<Note fill="rgba(1, 193, 181, .8)" shadowFill="#FFAB25" shadow x={-2} y={0} />
+									<span>黄色音符在上：演奏偏高</span>
+								</div>
+								<div class={styles.item}>
+									<Note fill="#2ABC6F" />
+									<span>绿色音符：演奏正确</span>
+								</div>
+								<div class={styles.item}>
+									<Note fill="rgba(1, 193, 181, .8)" shadowFill="#FFAB25" shadow x={-1} y={-3} />
+									<span>黄色音符在下：演奏偏低</span>
+								</div>
+								<div class={styles.item}>
+									<Note fill="#FF2B29" />
+									<span>红色音符：演奏错误</span>
+								</div>
+								<div class={styles.item}>
+									<Note fill="rgba(1, 193, 181, .8)" shadowFill="#FFAB25" shadow x={0.5} y={-1} />
+									<span>黄色音符在左：节奏偏快</span>
+								</div>
+								<div class={styles.item}>
+									<Note fill="#8F4EFB" />
+									<span>紫色音符：时值不足</span>
+								</div>
+								<div class={styles.item}>
+									<Note fill="rgba(1, 193, 181, .8)" shadowFill="#FFAB25" shadow x={-3} y={-2.5} />
+									<span>黄色音符在右：节奏偏慢</span>
+								</div>
+								<div class={styles.item}>
+									<Note fill="#ADADAD" />
+									<span>灰色音符：未演奏</span>
+								</div>
+
+
+
+
 							</div>
-							<div class={styles.item}>
-								<Note fill="rgba(1, 193, 181, .8)" shadowFill="#FFAB25" shadow x={-1} y={-3} />
-								<span>音符重影(黄色在下)：音低了</span>
+						</div> : 
+						<div class={styles.shiyiPopup}>
+							<img class={styles.shiyiTop} src={shiyiTop} />
+							<div class={styles.items}>
+								<div class={styles.itemTone}>
+									<img class={styles.firstIcon1} src={firstTop} />
+									<span>黄色箭头朝上：演奏偏高</span>
+								</div>
+								<div class={styles.itemTone}>
+									<img class={styles.firstIcon3} src={firstCorrect} />
+									<span>绿色音符：演奏正确</span>
+								</div>
+								<div class={styles.itemTone}>
+									<img class={styles.firstIcon1} src={firstBottom} />
+									<span>黄色箭头朝下：演奏偏低</span>
+								</div>
+								<div class={styles.itemTone}>
+									<img class={styles.firstIcon3} src={firstError} />
+									<span>红色音符：演奏错误</span>
+								</div>
+								<div class={styles.itemTone}>
+									<img class={[styles.firstIcon2, styles.fiz]} src={firstLeft} />
+									<span>黄色箭头朝左：节奏偏快</span>
+								</div>
+								<div class={styles.itemTone}>
+									<img class={styles.firstIcon3} src={firstLack} />
+									<span>紫色音符：时值不足</span>
+								</div>
+								<div class={styles.itemTone}>
+									<img class={styles.firstIcon2} src={firstRight} />
+									<span>黄色箭头朝右：节奏偏慢</span>
+								</div>
+								<div class={styles.itemTone}>
+									<img class={styles.firstIcon3} src={firstNot} />
+									<span>灰色音符：未演奏</span>
+								</div>
 							</div>
-						</div>
-					</div>
+						</div>											
+					}
+
+
 				</Popup>
 			</div>
 		);

src/page-instrument/view-evaluat-report/index.module.less

@@ -71,94 +71,63 @@
 
 .right {
   path {
-    fill: #01C1B5;
-    stroke: #01C1B5;
+    fill: #2ABC6F;
+    stroke: #2ABC6F;
   }
 }
 
-.wrong {
-  path {
-    fill: #FF4444;
-    stroke: #FF4444;
-  }
-}
-
-.notPlay {
-  path {
-    fill: #000;
-    stroke: #000;
-  }
-}
-
-// 音准
-.intonation_wrong {
+.inaccuracy {
   path {
-    fill: #FFAB25;
-    stroke: #FFAB25;
+    fill: #FF9200;
+    stroke: #FF9200;
   }
 }
 
-// 节奏
-.cadence_wrong {
+.wrong {
   path {
-    fill: #FF4444;
-    stroke: #FF4444;
+    fill: #FF2B29;
+    stroke: #FF2B29;
   }
 }
 
-// 完成度
-.integrity_wrong {
+.notPlay {
   path {
-    fill: #CC75FF;
-    stroke: #CC75FF;
-  }
-}
-
-
-
-
-.right{
-  path{
-    fill: #01C1B5;
-    stroke: #01C1B5;
-  }
-}
-
-.wrong{
-  path{
-    fill: #FF4444;
-    stroke: #FF4444;
+    fill: #ADADAD;
+    stroke: #ADADAD;
   }
 }
 
-.notPlay{
+// 音准
+.intonation_wrong,
+.intonation_high,
+.intonation_low{
   path{
-    fill: #AEAEAE;
-    stroke: #AEAEAE;
+    fill: #FF9200;
+    stroke: #FF9200;
   }
 }
 
+// 节奏
 .cadence_wrong,
 .cadence_fast,
 .cadence_slow {
   path{
-    fill: #FF4444;
-    stroke: #FF4444;
+    fill: #FF9200;
+    stroke: #FF9200;
   }
 }
 
-.intonation_wrong,
-.intonation_high,
-.intonation_low{
-  path{
-    fill: #FFAB25;
-    stroke: #FFAB25;
+// 完成度
+.integrity_wrong {
+  path {
+    fill: #8F4EFB;
+    stroke: #8F4EFB;
   }
 }
 
-.integrity_wrong{
-  path{
-    fill: #CC75FF;
-    stroke: #CC75FF;
-  }
+
+.arrowSvg {
+  opacity: 0;
+  width: 1;
+  height: 1;
 }

src/page-instrument/view-evaluat-report/index.tsx

@@ -16,6 +16,10 @@ import { api_musicPracticeRecordDetail, sysMusicScoreAccompanimentQueryPage } fr
 import { getMusicSheetDetail } from "/src/utils/baseApi"
 import ShareTop from "./component/share-top";
 import { addMeasureScore } from "/src/view/evaluating";
+import TopArrow from "./component/note/topArrow";
+import BottomArrow from "./component/note/bottomArrow";
+import LeftArrow from "./component/note/leftArrow";
+import RightArrow from "./component/note/rightArrow";
 
 const colorsClass: any = {
 	RIGHT: styles.right, // 正确
@@ -73,6 +77,7 @@ export default defineComponent({
 			score: 0,
 			heardLevel: "",
 			itemType: "intonation",
+			musicType: 'staff',
 		});
 
 		const detailData = reactive({
@@ -175,6 +180,8 @@ export default defineComponent({
 				console.error("解析评测结果:", error);
 			}
 			// console.log("🚀 ~ resultData:", resultData);
+			// @ts-ignore
+			// resultData.musicalNotesPlayStats?.notesData.forEach((item) => item.rhythmicAssessment.result = 'EARLY')
 			detailData.musicalNotesPlayStats = resultData.musicalNotesPlayStats?.notesData || [];
 			detailData.userMeasureScore = resultData.userMeasureScore || {};
 
@@ -184,6 +191,7 @@ export default defineComponent({
 			scoreData.intonation = res.data?.intonation;
 			scoreData.score = res.data?.score;
 			scoreData.videoFilePath = res.data?.videoFilePath || res.data?.recordFilePath;
+			scoreData.musicType = query.musicRenderType;
 			await getMusicDetail(resultData.musicalNotesPlayStats?.examSongId);
 			// 从练习记录进入评测报告，默认显示五线谱
 			if (!query.musicRenderType) {
@@ -199,24 +207,40 @@ export default defineComponent({
 
 
 		const getOffsetPosition = (type: keyof typeof colorsClass): string => {
-			switch (type) {
-			  case 'EARLY':
-				return 'translateX(-3px)'
-			  case 'LATE':
-				return 'translateX(3px)'
-			  case 'HIGH':
-				return 'translateY(-2px)'
-			  case 'LOW':
-				return 'translateY(2px)'
-			  default:
-				return ''
+			// 五线谱
+			if (scoreData.musicType === 'staff') {
+				switch (type) {
+					case 'EARLY':
+					  return 'translateX(-3px)'
+					case 'LATE':
+					  return 'translateX(3px)'
+					case 'HIGH':
+					  return 'translateY(-2px)'
+					case 'LOW':
+					  return 'translateY(2px)'
+					default:
+					  return ''
+				  }
+			} else {
+				switch (type) {
+					case 'EARLY':
+					  return 'translateX(-3px)'
+					case 'LATE':
+					  return 'translateX(3px)'
+					case 'HIGH':
+					  return 'translateY(-2px)'
+					case 'LOW':
+					  return 'translateY(-10px)'
+					default:
+					  return ''
+				  }
 			}
 		  }
 	  
 		  const filterNotes = () => {
 			const include = ['RIGHT', 'WRONG', 'NOT_PLAYED']
 			if (scoreData.itemType === 'intonation') { // 音准
-			  include.push(...['HIGH', 'LOW'])
+			  include.push(...['HIGH', 'LOW', 'DURATION_INSUFFICIENT'])
 			} else if (scoreData.itemType === 'cadence') { // 节奏
 			  include.push(...['EARLY', 'LATE'])
 			} else if (scoreData.itemType === 'integrity') { // 完整性
@@ -251,14 +275,44 @@ export default defineComponent({
 				svgEl?.classList.add(colorsClass[errType])
 				if (svgEl && isNeedCopyElement) {
 				  stemEl?.classList.remove(colorsClass[errType])
-				  stemEl?.classList.add(colorsClass.RIGHT)
 				  svgEl?.classList.remove(colorsClass[errType])
-				  svgEl?.classList.add(colorsClass.RIGHT)
-				  const copySvg = svgEl.querySelector('.vf-notehead')!.cloneNode(true) as SVGSVGElement
-				  copySvg.style.transform = getOffsetPosition(errType)
-				  svgEl.style.opacity = '.7'
-				  if (stemEl) {
-					stemEl.style.opacity = '.7'
+				  let copySvg: any = null;
+				  // 五线谱
+				  if (scoreData.musicType === 'staff') {
+					stemEl?.classList.add(colorsClass.RIGHT)
+					svgEl?.classList.add(colorsClass.RIGHT)
+					copySvg = svgEl.querySelector('.vf-notehead')!.cloneNode(true) as SVGSVGElement
+				  } else {
+					//copySvg = svgEl.querySelector('.vf-numbered-note-head')!.cloneNode(true) as SVGSVGElement
+					
+					if (isNeedCopyElement) {
+						svgEl?.classList.add(styles.inaccuracy)
+						const targetId = errType === 'HIGH' ? 'topSvg' : errType === 'LOW' ? 'bottomSvg' : errType === 'EARLY' ? 'leftSvg' : errType === 'LATE' ? 'rightSvg' : ''
+						copySvg = document.getElementById(targetId)!.cloneNode(true) as SVGSVGElement
+						const { width, height } = svgEl.getBoundingClientRect() || {}
+						// @ts-ignore
+						let { x, y } = svgEl?.getBBox() || {}
+						x = errType === 'HIGH' ? x + (width - 15)/2 + 1 : errType === 'LOW' ? x + (width - 15)/2 + 1 : errType === 'EARLY' ? x - Math.abs((width - 15)/2) - 12  : errType === 'LATE' ? x + width + 6 : x
+						y = errType === 'HIGH' ? y - Math.abs((height-10)/2) - 10 : errType === 'LOW' ? y + height + 8 : errType === 'EARLY' ? y + (height - 10)/2 : errType === 'LATE' ? y + (height - 10)/2 : y
+						copySvg.setAttribute("x", x)
+						copySvg.setAttribute("y", y)
+					}
+
+					// console.log(x,y,copySvg.getBoundingClientRect())
+					// const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+					// rect.setAttribute("x", 0 +'px');
+					// rect.setAttribute("y", 0+'px');
+					// rect.setAttribute("width", `50`);
+					// rect.setAttribute("height", `50`);
+					// rect.setAttribute("fill", "#FF4444");
+					// svgEl.prepend(rect);			
+				  }
+				  if (scoreData.musicType === 'staff') {
+					copySvg.style.transform = getOffsetPosition(errType)
+					svgEl.style.opacity = '.7'
+					if (stemEl) {
+					  stemEl.style.opacity = '.7'
+					}
 				  }
 				  copySvg.id = 'vf-' + active.id + '-copy'
 				  copySvg?.classList.add(colorsClass[errType])
@@ -328,7 +382,7 @@ export default defineComponent({
 			console.log("🚀 ~ state.times:", state.times);
 			//setPathColor();
 			setViewColor();
-			setMearureColor();
+			// setMearureColor();
 			api_cloudLoading();
 		};
 		onMounted(() => {
@@ -367,9 +421,16 @@ export default defineComponent({
 					id="scrollContainer"
 					class={[styles.container, !state.setting.displayCursor && "hideCursor"]}
 				>
-					<div class={styles.musicName}>{state.examSongName}</div>
 					{/* 曲谱渲染 */}
 					{!detailData.isLoading && <MusicScore onRendered={handleRendered} />}
+					{
+						<div class={styles.arrowSvg}>
+							<TopArrow />
+							<BottomArrow />
+							<LeftArrow />
+							<RightArrow />
+						</div>
+					}
 				</div>
 			</div>
 		);

src/view/music-score/index.tsx

@@ -63,6 +63,10 @@ export default defineComponent({
 			type: String,
 			default: "",
 		},
+		musicColor: {
+			type: String,
+			default: "",
+		},
 	},
 	setup(props, { emit }) {
 		/** 设置 曲谱模式,五线谱还是简谱 */
@@ -92,6 +96,7 @@ export default defineComponent({
 				followCursor: false,
 				drawPartNames: false, // 是否渲染声部
 				drawComposer: false, // 渲染作者
+				defaultColorMusic: props.musicColor, // 颜色
 				// autoBeam: true,
 				// drawMetronomeMarks: false,
 				// drawLyricist: false,