Bläddra i källkod

酷乐秀功能

liushengqiang 2 år sedan
förälder
incheckning
e69693f3c2

+ 2 - 1
colexiu.html

@@ -4,7 +4,8 @@
 <head>
   <meta charset="UTF-8" />
   <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="viewport"
+    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
   <title>酷乐秀</title>
   <link rel="icon" href="/favicon.ico" />
   <script src="/flexible.js" charset="UTF-8"></script>

+ 13 - 4
src/helpers/communication.ts

@@ -126,10 +126,19 @@ export const api_cloudFollowTime = (onFollowTime: CallBack, listen = true) => {
 	}
 };
 
-
 /** 结束webview */
 export const api_back = () => {
 	postMessage({
-		api: 'back'
-	})
-}
+		api: "back",
+	});
+};
+/** 关闭loading */
+export const api_cloudLoading = () => {
+	postMessage({
+		api: "cloudLoading",
+		content: {
+			show: false,
+			type: "fullscreen",
+		},
+	});
+};

Filskillnaden har hållts tillbaka eftersom den är för stor
+ 1 - 0
src/page-colexiu/component/the-comfirm/index.json


+ 44 - 0
src/page-colexiu/component/the-comfirm/index.module.less

@@ -0,0 +1,44 @@
+.fraction {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: #fff;
+    background-color: #fff;
+    border-radius: 18px;
+    min-width: 244px;
+}
+
+.title {
+    position: relative;
+    width: 100px;
+    height: 30px;
+    top: -4.5px;
+
+    img {
+        display: block;
+        width: 100%;
+        height: 100%;
+    }
+}
+
+.tip {
+    font-size: 13px;
+    color: #808080;
+    padding: 20px 0;
+}
+.btns{
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    width: 100%;
+    max-width: 244px;
+}
+.btn {
+    width: 40%;
+    height: 31px;
+    margin: 11px 0 17px 0;
+    line-height: 31px;
+    text-align: center;
+    border-radius: 36px;
+    font-size: 13px;
+}

+ 28 - 0
src/page-colexiu/component/the-comfirm/index.tsx

@@ -0,0 +1,28 @@
+import { defineComponent } from "vue";
+import styles from "./index.module.less";
+import icons from "./index.json";
+
+export default defineComponent({
+	name: "evaluat-audio",
+	props: {
+		tip: {
+			type: String,
+			default: () => ''
+		}
+	},
+	emits: ["close"],
+	setup(props, { emit }) {
+		return () => (
+			<div class={styles.fraction}>
+				<div class={styles.title}>
+					<img src={icons.title} />
+				</div>
+				<div class={styles.tip}>{props.tip}</div>
+				<div class={styles.btns}>
+					<img src={icons.cancel} class={styles.btn} onClick={() => emit("close")} />
+					<img src={icons.confirm} class={styles.btn} onClick={() => emit("close", true)} />
+				</div>
+			</div>
+		);
+	},
+});

+ 0 - 3
src/page-colexiu/detail/index.module.less

@@ -16,9 +16,6 @@
     overflow: hidden;
     --header-height: 62px;
     background: var(--container-background);
-    &.opencamera {
-        opacity: .7;
-    }
 
     .headHeight {
         position: fixed;

+ 6 - 8
src/page-colexiu/detail/index.tsx

@@ -12,7 +12,7 @@ import { sysMusicScoreAccompanimentQueryPage, sysMusicScoreCategoriesQueryTree }
 import EvaluatModel from "../evaluat-model";
 import HeaderTop from "../header-top";
 import styles from "./index.module.less";
-import { api_openCamera, api_setStatusBarVisibility, isSpecialShapedScreen } from "/src/helpers/communication";
+import { api_cloudLoading, api_openCamera, api_setStatusBarVisibility, isSpecialShapedScreen } from "/src/helpers/communication";
 import { getQuery } from "/src/utils/queryString";
 import Evaluating, { evaluatingData } from "/src/view/evaluating";
 import MeasureSpeed from "/src/view/plugins/measure-speed";
@@ -26,11 +26,7 @@ import FollowModel from "../follow-model";
 export default defineComponent({
 	name: "music-list",
 	setup() {
-		const route = useRoute();
-		const query: any = {
-			...getQuery(),
-			...route.query,
-		};
+		const query: any = getQuery();
 
 		const detailData = reactive({
 			isLoading: true,
@@ -103,6 +99,7 @@ export default defineComponent({
 			state.playMode = data.audioType === "MP3" ? "mp3" : "midi";
 			state.originSpeed = state.speed = data.playSpeed;
 			state.track = data.track;
+			state.enableNotation = data.notation ? true : false;
 
 			// 映射声部ID
 			state.subjectId = mappingVoicePart(state.track as any, "COLEXIU");
@@ -145,6 +142,7 @@ export default defineComponent({
 				const beatLengthInMilliseconds = osmd?.Sheet?.SheetPlaybackSetting?.beatLengthInMilliseconds || (60 / bpm) * 1000;
 				handleInitTick(beatLengthInMilliseconds, osmd?.Sheet?.SheetPlaybackSetting?.Rhythm?.Numerator || 4);
 			}
+			api_cloudLoading()
 		};
 		/** 指法配置 */
 		const fingerConfig = computed<any>(() => {
@@ -209,8 +207,8 @@ export default defineComponent({
 		});
 		return () => (
 			<div
-				class={[styles.detail, state.setting.camera && styles.opencamera, state.setting.eyeProtection && "eyeProtection"]}
-				style={{ paddingLeft: detailData.paddingLeft }}
+				class={[styles.detail, state.setting.eyeProtection && "eyeProtection"]}
+				style={{ paddingLeft: detailData.paddingLeft, opacity:  state.setting.camera ? `${state.setting.cameraOpacity / 100}` : ''}}
 			>
 				{!state.musicRendered && (
 					<div class={styles.skeleton}>

Filskillnaden har hållts tillbaka eftersom den är för stor
+ 12 - 0
src/page-colexiu/header-top/image/guding-active.svg


Filskillnaden har hållts tillbaka eftersom den är för stor
+ 12 - 0
src/page-colexiu/header-top/image/guding.svg


Filskillnaden har hållts tillbaka eftersom den är för stor
+ 13 - 0
src/page-colexiu/header-top/image/icon-staff-active.svg


Filskillnaden har hållts tillbaka eftersom den är för stor
+ 13 - 0
src/page-colexiu/header-top/image/icon-staff.svg


Filskillnaden har hållts tillbaka eftersom den är för stor
+ 9 - 0
src/page-colexiu/header-top/image/icon-zhuanpu.svg


+ 19 - 0
src/page-colexiu/header-top/image/info.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组</title>
+    <g id="页面-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="全局设置" transform="translate(-274.000000, -87.000000)" fill-rule="nonzero">
+            <g id="编组-22" transform="translate(246.000000, 23.000000)">
+                <g id="编组-3" transform="translate(15.000000, 54.000000)">
+                    <g id="编组" transform="translate(13.000000, 10.000000)">
+                        <path d="M8.00000178,0 C3.59200139,0 1.77986584e-06,3.59199961 1.77986584e-06,8 C1.77986584e-06,12.4079986 3.59200137,16 8.00000178,16 C12.4080004,16 16.0000018,12.4079986 16.0000018,8 C16.0000018,3.59199959 12.4080004,0 8.00000178,0 Z" id="路径" fill="#FEAC13"></path>
+                        <path d="M13.6672003,2.36159974 C14.6589912,3.35644003 15.3716365,4.59467148 15.7336,5.95199933 L5.95200111,15.7335982 C4.59467326,15.3716347 3.35644181,14.6589894 2.36160152,13.6671985 L7.44960095,8.57919905 C7.59360093,8.71599904 7.78800091,8.79999903 8.00000089,8.79999903 C8.44000085,8.79999903 8.80000081,8.43999907 8.80000081,7.99999911 L8.80000081,7.22879919 L13.6672003,2.36159974 Z M8.00000089,10.3999988 C7.56000093,10.3999988 7.20000097,10.7599988 7.20000097,11.1999988 C7.20000097,11.6399987 7.56000093,11.9999987 8.00000089,11.9999987 C8.44000085,11.9999987 8.80000081,11.6399987 8.80000081,11.1999988 C8.80000081,10.7599988 8.44000085,10.3999988 8.00000089,10.3999988 L8.00000089,10.3999988 Z" id="形状" fill="#FFB936"></path>
+                        <path d="M10.0936007,0.278399969 C11.4466535,0.647925598 12.6789481,1.36628136 13.6672003,2.36159974 L8.80000081,7.22879919 L8.80000081,4.79999946 C8.80000081,4.39199951 8.48960084,4.05199955 8.09280087,4.00559955 L8.00000089,3.99999956 C7.56000093,3.99999956 7.20000097,4.35999952 7.20000097,4.79999946 L7.20000097,7.99999911 C7.20000097,8.22719908 7.29600096,8.43359906 7.44960095,8.57919905 L2.36160152,13.6671985 C1.36628314,12.6789463 0.647927378,11.4466517 0.278401749,10.0935989 L10.0936007,0.278399969 Z" id="路径" fill="#FFC964"></path>
+                        <path d="M8,0 C8.7240008,0 9.42560073,0.0967999954 10.0936007,0.278399969 L0.278401749,10.0935989 C0.0931508027,9.4111699 -0.000470761078,8.70712498 0,8 C0,3.59199961 3.59200139,0 8,0 Z" id="路径" fill="#FFD78C"></path>
+                        <path d="M8.16000087,10.7199987 C8.68800081,10.7199987 9.12000076,11.1519987 9.12000076,11.6799986 C9.12000076,12.2079986 8.68800081,12.6399985 8.16000087,12.6399985 C7.63200092,12.6399985 7.20000097,12.2079986 7.20000097,11.6799986 C7.20000097,11.1519987 7.63200092,10.7199987 8.16000087,10.7199987 Z M8.16000087,3.03999967 C8.68800081,3.03999967 9.12000076,3.47199962 9.12000076,3.99999954 L9.12000076,7.83999909 C9.12000076,8.36799903 8.68800081,8.79999898 8.16000087,8.79999898 C7.63200092,8.79999898 7.20000097,8.36799903 7.20000097,7.83999909 L7.20000097,3.99999954 C7.20000097,3.4719996 7.63200092,3.03999967 8.16000087,3.03999967 Z" id="形状结合" fill="#FFFFFF"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

+ 36 - 0
src/page-colexiu/header-top/image/off.svg

@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="46px" height="24px" viewBox="0 0 46 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>switch off备份@2x</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#FFFFFF" offset="0%"></stop>
+            <stop stop-color="#F2F2F2" offset="100%"></stop>
+        </linearGradient>
+        <rect id="path-2" x="15.6818182" y="2.09090909" width="27.1818182" height="18.8181818" rx="7"></rect>
+        <filter x="-12.9%" y="-13.3%" width="125.8%" height="137.2%" filterUnits="objectBoundingBox" id="filter-3">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0.63062408   0 0 0 0 0.63062408   0 0 0 0 0.63062408  0 0 0 0.746606787 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="页面-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="全局设置" transform="translate(-495.000000, -122.000000)">
+            <g id="编组-22" transform="translate(246.000000, 23.000000)">
+                <g id="编组-19" transform="translate(25.000000, 99.000000)">
+                    <g id="switch-off备份" transform="translate(247.000000, 11.500000) scale(-1, 1) translate(-247.000000, -11.500000) translate(224.000000, 0.000000)">
+                        <rect id="矩形" fill="#D2D2D2" x="0" y="0" width="46" height="23" rx="9"></rect>
+                        <g id="矩形">
+                            <use fill="black" fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-2"></use>
+                            <use fill="url(#linearGradient-1)" fill-rule="evenodd" xlink:href="#path-2"></use>
+                        </g>
+                        <g id="OFF" transform="translate(29.712631, 11.412864) scale(-1, 1) translate(-29.712631, -11.412864) translate(20.609807, 7.359364)" fill="#D0D0D0" fill-rule="nonzero">
+                            <path d="M3.476,0 C4.07,0 4.58516667,0.1045 5.0215,0.3135 C5.45783333,0.5225 5.819,0.8085 6.105,1.1715 C6.391,1.5345 6.60366667,1.96166667 6.743,2.453 C6.88233333,2.94433333 6.952,3.476 6.952,4.048 C6.952,4.62 6.88233333,5.1535 6.743,5.6485 C6.60366667,6.1435 6.391,6.5725 6.105,6.9355 C5.819,7.2985 5.45783333,7.5845 5.0215,7.7935 C4.58516667,8.0025 4.07,8.107 3.476,8.107 C2.904,8.107 2.40166667,8.00616667 1.969,7.8045 C1.53633333,7.60283333 1.17333333,7.32233333 0.88,6.963 C0.586666667,6.60366667 0.366666667,6.17466667 0.22,5.676 C0.0733333333,5.17733333 0,4.63466667 0,4.048 C0,3.48333333 0.066,2.9535 0.198,2.4585 C0.33,1.9635 0.537166667,1.5345 0.8195,1.1715 C1.10183333,0.8085 1.46116667,0.5225 1.8975,0.3135 C2.33383333,0.1045 2.86,0 3.476,0 Z M3.476,6.853 C3.86466667,6.853 4.18916667,6.7815 4.4495,6.6385 C4.70983333,6.4955 4.92066667,6.29933333 5.082,6.05 C5.24333333,5.80066667 5.357,5.50733333 5.423,5.17 C5.489,4.83266667 5.522,4.46966667 5.522,4.081 C5.522,3.69233333 5.48533333,3.32566667 5.412,2.981 C5.33866667,2.63633333 5.22133333,2.33566667 5.06,2.079 C4.89866667,1.82233333 4.68783333,1.62066667 4.4275,1.474 C4.16716667,1.32733333 3.85,1.254 3.476,1.254 C3.102,1.254 2.78483333,1.32916667 2.5245,1.4795 C2.26416667,1.62983333 2.05333333,1.8315 1.892,2.0845 C1.73066667,2.3375 1.61333333,2.63266667 1.54,2.97 C1.46666667,3.30733333 1.43,3.66666667 1.43,4.048 C1.43,4.39266667 1.463,4.73366667 1.529,5.071 C1.595,5.40833333 1.70866667,5.709 1.87,5.973 C2.03133333,6.237 2.24216667,6.44966667 2.5025,6.611 C2.76283333,6.77233333 3.08733333,6.853 3.476,6.853 Z" id="形状"></path>
+                            <path d="M11.671,3.311 C11.8836667,3.311 12.0523333,3.36233333 12.177,3.465 C12.2796667,3.56766667 12.331,3.72533333 12.331,3.938 C12.331,4.158 12.2796667,4.31383333 12.177,4.4055 C12.0743333,4.49716667 11.9056667,4.543 11.671,4.543 L9.339,4.543 L9.339,7.546 C9.339,7.64866667 9.28216667,7.7495 9.1685,7.8485 C9.05483333,7.9475 8.86966667,7.997 8.613,7.997 C8.35633333,7.997 8.17483333,7.9475 8.0685,7.8485 C7.96216667,7.7495 7.909,7.64866667 7.909,7.546 L7.909,0.825 C7.909,0.597666667 7.96766667,0.44 8.085,0.352 C8.20233333,0.264 8.37833333,0.22 8.613,0.22 L12.012,0.22 C12.2246667,0.22 12.3841667,0.265833333 12.4905,0.3575 C12.5968333,0.449166667 12.6536667,0.608666667 12.661,0.836 C12.6683333,1.06333333 12.6133333,1.22283333 12.496,1.3145 C12.3786667,1.40616667 12.2136667,1.452 12.001,1.452 L9.339,1.452 L9.339,3.311 L11.671,3.311 Z" id="路径"></path>
+                            <path d="M17.215,3.311 C17.4276667,3.311 17.5963333,3.36233333 17.721,3.465 C17.8236667,3.56766667 17.875,3.72533333 17.875,3.938 C17.875,4.158 17.8236667,4.31383333 17.721,4.4055 C17.6183333,4.49716667 17.4496667,4.543 17.215,4.543 L14.883,4.543 L14.883,7.546 C14.883,7.64866667 14.8261667,7.7495 14.7125,7.8485 C14.5988333,7.9475 14.4136667,7.997 14.157,7.997 C13.9003333,7.997 13.7188333,7.9475 13.6125,7.8485 C13.5061667,7.7495 13.453,7.64866667 13.453,7.546 L13.453,0.825 C13.453,0.597666667 13.5116667,0.44 13.629,0.352 C13.7463333,0.264 13.9223333,0.22 14.157,0.22 L17.556,0.22 C17.7686667,0.22 17.9281667,0.265833333 18.0345,0.3575 C18.1408333,0.449166667 18.1976667,0.608666667 18.205,0.836 C18.2123333,1.06333333 18.1573333,1.22283333 18.04,1.3145 C17.9226667,1.40616667 17.7576667,1.452 17.545,1.452 L14.883,1.452 L14.883,3.311 L17.215,3.311 Z" id="路径"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

+ 39 - 0
src/page-colexiu/header-top/image/on.svg

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="46px" height="24px" viewBox="0 0 46 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>switch off@2x</title>
+    <defs>
+        <linearGradient x1="78.0181074%" y1="0%" x2="78.0181074%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#39F3D0" offset="0%"></stop>
+            <stop stop-color="#2DC7AA" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
+            <stop stop-color="#FFFFFF" offset="0%"></stop>
+            <stop stop-color="#DAFFF8" offset="100%"></stop>
+        </linearGradient>
+        <rect id="path-3" x="2.09090909" y="2.09090909" width="27.1818182" height="18.8181818" rx="7"></rect>
+        <filter x="-12.9%" y="-13.3%" width="125.8%" height="137.2%" filterUnits="objectBoundingBox" id="filter-4">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0.093603643   0 0 0 0 0.694167427   0 0 0 0 0.581074247  0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="页面-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="全局设置" transform="translate(-495.000000, -254.000000)">
+            <g id="编组-22" transform="translate(246.000000, 23.000000)">
+                <g id="编组-19" transform="translate(25.000000, 99.000000)">
+                    <g id="switch-off" transform="translate(247.000000, 143.500000) scale(-1, 1) translate(-247.000000, -143.500000) translate(224.000000, 132.000000)">
+                        <rect id="矩形" fill="url(#linearGradient-1)" x="0" y="0" width="46" height="23" rx="9"></rect>
+                        <g id="矩形">
+                            <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
+                            <use fill="url(#linearGradient-2)" fill-rule="evenodd" xlink:href="#path-3"></use>
+                        </g>
+                        <g id="ON" transform="translate(16.680955, 11.412864) scale(-1, 1) translate(-16.680955, -11.412864) translate(9.668455, 7.359364)" fill="#2DC7AA" fill-rule="nonzero">
+                            <path d="M3.476,0 C4.07,0 4.58516667,0.1045 5.0215,0.3135 C5.45783333,0.5225 5.819,0.8085 6.105,1.1715 C6.391,1.5345 6.60366667,1.96166667 6.743,2.453 C6.88233333,2.94433333 6.952,3.476 6.952,4.048 C6.952,4.62 6.88233333,5.1535 6.743,5.6485 C6.60366667,6.1435 6.391,6.5725 6.105,6.9355 C5.819,7.2985 5.45783333,7.5845 5.0215,7.7935 C4.58516667,8.0025 4.07,8.107 3.476,8.107 C2.904,8.107 2.40166667,8.00616667 1.969,7.8045 C1.53633333,7.60283333 1.17333333,7.32233333 0.88,6.963 C0.586666667,6.60366667 0.366666667,6.17466667 0.22,5.676 C0.0733333333,5.17733333 0,4.63466667 0,4.048 C0,3.48333333 0.066,2.9535 0.198,2.4585 C0.33,1.9635 0.537166667,1.5345 0.8195,1.1715 C1.10183333,0.8085 1.46116667,0.5225 1.8975,0.3135 C2.33383333,0.1045 2.86,0 3.476,0 Z M3.476,6.853 C3.86466667,6.853 4.18916667,6.7815 4.4495,6.6385 C4.70983333,6.4955 4.92066667,6.29933333 5.082,6.05 C5.24333333,5.80066667 5.357,5.50733333 5.423,5.17 C5.489,4.83266667 5.522,4.46966667 5.522,4.081 C5.522,3.69233333 5.48533333,3.32566667 5.412,2.981 C5.33866667,2.63633333 5.22133333,2.33566667 5.06,2.079 C4.89866667,1.82233333 4.68783333,1.62066667 4.4275,1.474 C4.16716667,1.32733333 3.85,1.254 3.476,1.254 C3.102,1.254 2.78483333,1.32916667 2.5245,1.4795 C2.26416667,1.62983333 2.05333333,1.8315 1.892,2.0845 C1.73066667,2.3375 1.61333333,2.63266667 1.54,2.97 C1.46666667,3.30733333 1.43,3.66666667 1.43,4.048 C1.43,4.39266667 1.463,4.73366667 1.529,5.071 C1.595,5.40833333 1.70866667,5.709 1.87,5.973 C2.03133333,6.237 2.24216667,6.44966667 2.5025,6.611 C2.76283333,6.77233333 3.08733333,6.853 3.476,6.853 Z" id="形状"></path>
+                            <path d="M9.339,7.425 C9.339,7.57166667 9.284,7.70366667 9.174,7.821 C9.064,7.93833333 8.88066667,7.997 8.624,7.997 C8.36733333,7.997 8.184,7.93466667 8.074,7.81 C7.964,7.68533333 7.909,7.557 7.909,7.425 L7.909,0.627 C7.909,0.495 7.94566667,0.375833333 8.019,0.2695 C8.09233333,0.163166667 8.261,0.11 8.525,0.11 C8.67166667,0.11 8.79083333,0.154 8.8825,0.242 C8.97416667,0.33 9.053,0.418 9.119,0.506 L12.595,5.181 L12.595,0.682 C12.595,0.55 12.65,0.421666667 12.76,0.297 C12.87,0.172333333 13.0533333,0.11 13.31,0.11 C13.5666667,0.11 13.75,0.168666667 13.86,0.286 C13.97,0.403333333 14.025,0.535333333 14.025,0.682 L14.025,7.502 C14.025,7.62666667 13.9883333,7.74033333 13.915,7.843 C13.8416667,7.94566667 13.6766667,7.997 13.42,7.997 C13.2733333,7.997 13.1505,7.953 13.0515,7.865 C12.9525,7.777 12.87,7.689 12.804,7.601 L9.339,3.08 L9.339,7.425 Z" id="路径"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

Filskillnaden har hållts tillbaka eftersom den är för stor
+ 11 - 0
src/page-colexiu/header-top/image/shuodiao-active.svg


Filskillnaden har hållts tillbaka eftersom den är för stor
+ 11 - 0
src/page-colexiu/header-top/image/shuodiao.svg


+ 22 - 1
src/page-colexiu/header-top/index.tsx

@@ -16,9 +16,11 @@ import state, { handleChangeSection, handleResetPlay, handleRessetState, toggleP
 import { getAudioCurrentTime } from "/src/view/audio-list";
 import { toggleFollow } from "/src/view/follow-practice";
 import { api_back } from "/src/helpers/communication";
+import MusicType from "./music-type";
 
 export const headData = reactive({
 	speedShow: false,
+	musicTypeShow: false,
 });
 
 export default defineComponent({
@@ -66,8 +68,9 @@ export default defineComponent({
 
 		/** 返回 */
 		const handleBack = () => {
-			api_back()
+			api_back();
 		};
+
 		return () => (
 			<div ref={headRef} class={styles.headerTop}>
 				<div class={styles.back} onClick={handleBack}>
@@ -153,6 +156,24 @@ export default defineComponent({
 							default: () => <Speed />,
 						}}
 					</Popover>
+					<Popover trigger="manual" v-model:show={headData.musicTypeShow} placement="bottom-end" overlay={false}>
+						{{
+							reference: () => (
+								<div
+									class={[styles.btn, disabledList.includes(state.modeType) && styles.disable]}
+									onClick={(e: Event) => {
+										e.stopPropagation();
+										headData.musicTypeShow = !headData.musicTypeShow;
+									}}
+								>
+									<img class={styles.iconBtn} src={headImg("icon-zhuanpu.svg")} />
+									<span>转简谱</span>
+								</div>
+							),
+							default: () => <MusicType />,
+						}}
+					</Popover>
+
 					<div class={[styles.btn, disabledList.includes(state.modeType) && styles.disable]} onClick={() => (headerData.settingMode = true)}>
 						<img class={styles.iconBtn} src={headImg("menu.svg")} />
 						<span>设置</span>

+ 10 - 0
src/page-colexiu/header-top/music-type/index.module.less

@@ -0,0 +1,10 @@
+.item {
+  white-space: nowrap;
+  &>img {
+    max-height: 20px;
+    margin-right: 12px;
+  }
+}
+.active{
+  color: var(--van-primary-color);
+}

+ 62 - 0
src/page-colexiu/header-top/music-type/index.tsx

@@ -0,0 +1,62 @@
+import { defineComponent, reactive, ref, watch } from "vue";
+import { headImg } from "../image";
+import { useClickAway } from "@vant/use";
+import { headData } from "..";
+import styles from "./index.module.less";
+import state from "/src/state";
+import { Popup } from "@varlet/ui";
+import TheComfirm from "../../component/the-comfirm";
+import { musicRenderTypeKey, resetRenderMusicScore } from "/src/view/music-score";
+export default defineComponent({
+	name: "musicType",
+	setup(props) {
+		const musicTypeData = reactive({
+			show: false,
+			type: 'staff' as any
+		})
+		const musicTypeRef = ref();
+		useClickAway(musicTypeRef, () => {
+			headData.musicTypeShow = false;
+		});
+		/** 选择曲谱渲染模式 */
+		const onSelect = (type: any) => {
+			if (state.musicRenderType == type) return;
+			musicTypeData.show = true
+			musicTypeData.type = type
+		};
+
+		/** 确定结果 */
+		const handleResult = (type: any) => {
+			if (type){
+				state.musicRenderType = musicTypeData.type
+				sessionStorage.setItem(musicRenderTypeKey, musicTypeData.type)
+				resetRenderMusicScore()
+			} else {
+				headData.musicTypeShow = false;
+				musicTypeData.type = ''
+			}
+			musicTypeData.show = false
+		}
+		return () => (
+			<>
+				<div ref={musicTypeRef}>
+					<div class={["van-popover__action", styles.item, state.musicRenderType === "staff" && styles.active]} onClick={() => onSelect("staff")}>
+						<img src={state.musicRenderType === "staff" ? headImg("icon-staff-active.svg") : headImg("icon-staff.svg")} />
+						<div>五线谱</div>
+					</div>
+					<div class={["van-popover__action", styles.item, state.musicRenderType === "firstTone" && styles.active]} onClick={() => onSelect("firstTone")}>
+						<img src={state.musicRenderType === "firstTone" ? headImg("shuodiao-active.svg") : headImg("shuodiao.svg")} />
+						<div>首调</div>
+					</div>
+					<div class={["van-popover__action", styles.item, state.musicRenderType === "fixedTone" && styles.active]} onClick={() => onSelect("fixedTone")}>
+						<img src={state.musicRenderType === "fixedTone" ? headImg("guding-active.svg") : headImg("guding.svg")} />
+						<div>固定调</div>
+					</div>
+				</div>
+				<Popup teleport="body" closeOnClickOverlay={false} defaultStyle={false} v-model:show={musicTypeData.show}>
+					<TheComfirm tip="设置成功,是否立即重新加载?" onClose={handleResult} />
+				</Popup>
+			</>
+		);
+	},
+});

+ 108 - 25
src/page-colexiu/header-top/settting/index.module.less

@@ -34,50 +34,133 @@
     max-height: 310px;
     --van-tabs-line-height: 50px;
     --van-tab-active-text-color: var(--van-primary-color);
-    :global{
-        .van-tab__panel{
+
+    :global {
+        .van-tab__panel {
             height: calc(86vh - 50px);
+            max-height: calc(310px - 50px);
             overflow-y: auto;
-            padding: 0 10px 10px 10px;
+            padding: 0 20px 10px 20px;
+
             &::-webkit-scrollbar {
                 width: 0;
                 display: none;
             }
         }
-        .van-tabs__nav--line{
+
+        .van-tabs__nav--line {
             padding-bottom: 0;
         }
-        .van-tabs__line{
+
+        .van-tabs__line {
             bottom: 0;
         }
+        .van-cell{
+            padding-left: 0;
+            padding-right: 0;
+            &:after{
+                left: 0;
+                right: 0;
+                border-color: #F0F0F0;
+            }
+        }
+
+        .van-switch {
+            background-color: transparent !important;
+            background-image: url('../image/off.svg');
+            background-repeat: no-repeat;
+            background-size: 100% 100%;
+            background-position: center;
+            border-radius: 0;
+
+            &.van-switch--on {
+                background-image: url('../image/on.svg');
+            }
+
+            .van-switch__node {
+                display: none;
+            }
+
+
+
+        }
     }
 }
 
-.tags {
+.reactionTime {
+    :global {
+        .van-cell__title {
+            width: 60%;
+        }
+
+        .van-cell__value {
+            text-align: right;
+        }
+    }
+}
+
+.radioGroup {
     display: flex;
-    justify-content: space-between;
-    text-align: center;
-    padding: 0 var(--cell-padding);
-    &.tagsbig {
-        >span {
-            width: 47.5%;
+    align-items: center;
+    border-radius: 14px;
+    background: linear-gradient(180deg, #39f3d0 0%, #2dc7aa 100%);
+    padding: 4px;
+
+    :global {
+        .van-radio {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 22px;
+            margin: 0 3px;
+            border-radius: 6px;
+            padding: 0 4px;
+        }
+
+        .van-radio__icon {
+            display: none;
+        }
+
+        .van-radio__label {
+            margin: 0 auto;
+            font-size: 10px;
+            color: #fff;
+            font-weight: bold;
+            white-space: nowrap;
             text-align: center;
         }
+
+        .van-radio[aria-checked='true'] {
+            background: linear-gradient(180deg, #ffffff 0%, #dafff8 100%);
+            box-shadow: 0px 0px 1px 0px rgba(24, 177, 148, 1);
+
+            .van-radio__label {
+                color: #2dc7aa;
+                font-weight: bold;
+            }
+        }
     }
+}
 
-    >span {
-        border-radius: 3PX;
-        display: block;
-        width: 31%;
-        font-size: 12PX;
-        padding: 6PX 0;
-        background-color: #F8F8F8;
-        color: #999999;
-        border: 1PX solid #F8F8F8;
-        &.active {
-            color: var(--van-primary-color);
-            border-color: var(--van-primary-color);
-            background-color: #E2FFF9;
+.sliderWrap {
+    :global {
+        .var-cell__extra {
+            flex: 2;
         }
     }
+}
+
+.slider {
+    width: 60%;
+    margin-right: 20px;
+
+    .sliderBtn {
+        width: 40px;
+        color: #fff;
+        font-size: 12px;
+        line-height: 20px;
+        text-align: center;
+        background-color: var(--van-primary-color);
+        border-radius: 20px;
+    }
 }

+ 58 - 55
src/page-colexiu/header-top/settting/index.tsx

@@ -1,11 +1,11 @@
 import { defineComponent, onBeforeMount, watch } from "vue";
 import styles from "./index.module.less";
 import iconClose from "../image/close2.svg";
-import { Tab, Tabs } from "vant";
-import { Cell, Switch } from "@varlet/ui";
+import { Cell, Field, NoticeBar, Radio, RadioGroup, Slider, Switch, Tab, Tabs } from "vant";
 import state from "/src/state";
 import { api_closeCamera, api_openCamera } from "/src/helpers/communication";
-import store from 'store'
+import store from "store";
+import iconInfo from "../image/info.svg";
 
 export default defineComponent({
 	name: "header-settting",
@@ -13,27 +13,54 @@ export default defineComponent({
 	setup(props, { emit }) {
 		// 设置改变触发
 		watch(state.setting, () => {
-			store.set('musicscoresetting', state.setting)
-		})
+			store.set("musicscoresetting", state.setting);
+		});
 		return () => (
 			<div class={styles["header-settting"]}>
 				<div class={styles.closeBtn} onClick={() => emit("close")}>
 					<img src={iconClose} />
 				</div>
 				<div class={styles.content}>
-					<Tabs border animated>
-						<Tab title="设置">
-							<Cell title="护眼模式">
+					<Tabs border animated swipeable>
+						<Tab title="全局设置">
+							<NoticeBar class={styles.noticebar} left-icon={iconInfo} text="全局设置会更改所有乐谱练习及评测" />
+							<Cell title="护眼模式" center>
 								{{
 									extra: () => <Switch v-model={state.setting.eyeProtection}></Switch>,
 								}}
 							</Cell>
-							<Cell title="校音提醒">
+						</Tab>
+						<Tab title="练习设置">
+							<Cell title="循环播放" center>
+								{{
+									extra: () => <Switch v-model={state.setting.repeatAutoPlay}></Switch>,
+								}}
+							</Cell>
+							<Cell title="显示指法" center>
+								{{
+									extra: () => <Switch v-model={state.setting.displayFingering}></Switch>,
+								}}
+							</Cell>
+						</Tab>
+						<Tab title="评测">
+							<Cell title="选择评测难度" center>
+								{{
+									extra: () => (
+										<RadioGroup iconSize={20} class={styles.radioGroup} v-model={state.setting.evaluationDifficulty}>
+											<Radio name="BEGINNER">入门</Radio>
+											<Radio name="ADVANCED">进阶</Radio>
+											<Radio name="PERFORMER">大师</Radio>
+										</RadioGroup>
+									),
+								}}
+							</Cell>
+
+							<Cell title="校音提醒" center>
 								{{
 									extra: () => <Switch v-model={state.setting.soundEffect}></Switch>,
 								}}
 							</Cell>
-							<Cell title="摄像头">
+							<Cell title="摄像头" center>
 								{{
 									extra: () => (
 										<Switch
@@ -49,63 +76,39 @@ export default defineComponent({
 									),
 								}}
 							</Cell>
-							<Cell title="循环播放">
+							<Cell style={{display: state.setting.camera ? '' : 'none'}} title="透明度" class={styles.sliderWrap} center>
 								{{
-									extra: () => <Switch v-model={state.setting.repeatAutoPlay}></Switch>,
+									extra: () => (
+										<Slider class={styles.slider} min={0} max={100} v-model:modelValue={state.setting.cameraOpacity}>
+											{{
+												button: () => <div class={styles.sliderBtn}>{state.setting.cameraOpacity}</div>,
+											}}
+										</Slider>
+									),
 								}}
 							</Cell>
-							<Cell title="显示指法">
+							<Cell title="保存到相册" center>
 								{{
-									extra: () => <Switch v-model={state.setting.displayFingering}></Switch>,
+									extra: () => <Switch v-model={state.setting.saveToAlbum}></Switch>,
 								}}
 							</Cell>
-							<Cell title="显示光标">
+							<Cell title="开启伴奏" center>
 								{{
-									extra: () => <Switch v-model={state.setting.displayCursor}></Switch>,
-								}}
-							</Cell>
-							<Cell title="选择调率"></Cell>
-							<div class={[styles.tags, styles.tagsbig]}>
-								<span class={[styles.tag, state.setting.frequency === 440 && styles.active]} onClick={() => (state.setting.frequency = 440)}>
-									440Hz
-								</span>
-								<span class={[styles.tag, state.setting.frequency === 442 && styles.active]} onClick={() => (state.setting.frequency = 442)}>
-									442Hz
-								</span>
-							</div>
-						</Tab>
-						<Tab title="评测">
-							<Cell title="选择评测难度"></Cell>
-							<div class={styles.tags}>
-								<span
-									class={[styles.tag, state.setting.evaluationDifficulty === "BEGINNER" && styles.active]}
-									onClick={() => (state.setting.evaluationDifficulty = "BEGINNER")}
-								>
-									入门级
-								</span>
-								<span
-									class={[styles.tag, state.setting.evaluationDifficulty === "ADVANCED" && styles.active]}
-									onClick={() => (state.setting.evaluationDifficulty = "ADVANCED")}
-								>
-									进阶级
-								</span>
-								<span
-									class={[styles.tag, state.setting.evaluationDifficulty === "PERFORMER" && styles.active]}
-									onClick={() => (state.setting.evaluationDifficulty = "PERFORMER")}
-								>
-									大师级
-								</span>
-							</div>
-							<Cell title="保存到相册">
-								{{
-									extra: () => <Switch v-model={state.setting.saveToAlbum}></Switch>,
+									extra: () => <Switch v-model={state.setting.enableAccompaniment}></Switch>,
 								}}
 							</Cell>
-							<Cell title="开启伴奏">
+							<Cell title="标准音高" center>
 								{{
-									extra: () => <Switch v-model={state.setting.enableAccompaniment}></Switch>,
+									extra: () => (
+										<RadioGroup iconSize={20} class={styles.radioGroup} v-model={state.setting.frequency}>
+											<Radio name={440}>440Hz</Radio>
+											<Radio name={442}>442Hz</Radio>
+										</RadioGroup>
+									),
 								}}
 							</Cell>
+
+							<Field class={styles.reactionTime} label="反应时间(毫秒)" type="digit" v-model:modelValue={state.setting.reactionTimeMs} />
 						</Tab>
 					</Tabs>
 				</div>

+ 6 - 0
src/state.ts

@@ -11,9 +11,11 @@ import { toggleFollow } from "./view/follow-practice";
 
 /** 入门 | 进阶 | 大师 */
 export type IDifficulty = "BEGINNER" | "ADVANCED" | "PERFORMER";
+export type IMusicRenderType = 'staff' | 'firstTone' | 'fixedTone'
 
 const state = reactive({
 	appName: "" as "GYM" | "COLEXIU",
+	musicRenderType: 'staff' as IMusicRenderType, 
 	/**曲谱是否渲染完成 */
 	musicRendered: false,
 	/** 当前曲谱数据ID, 和曲谱ID不一致 */
@@ -28,6 +30,8 @@ const state = reactive({
 	categoriesName: "",
 	/** 是否支持评测 */
 	enableEvaluation: true,
+	/** 是否支持转谱 */
+	enableNotation: false,
 	/** 曲谱ID */
 	examSongId: "",
 	/** 曲谱名称 */
@@ -96,6 +100,8 @@ const state = reactive({
 		eyeProtection: false,
 		/** 摄像头 */
 		camera: false,
+		/** 摄像头透明度 */
+		cameraOpacity: 70,
 		/** 循环播放 */
 		repeatAutoPlay: true,
 		/** 显示指法 */

+ 4 - 1
src/utils/queryString.ts

@@ -2,7 +2,10 @@ import qs from 'query-string'
 export const getQuery = () => {
     let search = {}
     try {
-        search = qs.parse(location.search || location.hash.split('?')[1])
+        search = {
+            ...qs.parse(location.search),
+            ...qs.parse(location.hash.split('?')[1]),
+        }
     } catch (error) {
         
     }

+ 25 - 0
src/view/music-score/index.tsx

@@ -5,6 +5,9 @@ import { OpenSheetMusicDisplay } from "/osmd-extended/src";
 import state from "/src/state";
 import Selection from "../selection";
 import "./index.module.less";
+import queryString from "query-string";
+
+export const musicRenderTypeKey = 'musicRenderType'
 
 const musicData = reactive({
 	showSelection: false, // 可以加载点击浮层
@@ -26,10 +29,24 @@ export const resetMusicScore = () => {
 	}
 };
 
+/** 重新渲染曲谱 */
+export const resetRenderMusicScore = () => {
+	const search = queryString.parse(location.search)
+	const newSearch = queryString.stringify({
+		...search,
+		_t: Date.now()
+	})
+	location.search = "?" + newSearch
+}
+
 export default defineComponent({
 	name: "music-score",
 	emits: ["rendered"],
 	setup(prop, { emit }) {
+		const setRenderType = () => {
+			const musicRenderType: any = sessionStorage.getItem(musicRenderTypeKey)
+			state.musicRenderType = ['staff', 'firstTone', 'fixedTone'].includes(musicRenderType) ? musicRenderType : 'staff'
+		}
 		const getXML = async () => {
 			const res = await fetch(state.xmlUrl).then((response) => response.text());
 			const xml = formatXML(res);
@@ -58,6 +75,13 @@ export default defineComponent({
 			osmd.EngravingRules.PageTopMargin = 2;
 			osmd.EngravingRules.PageLeftMargin = 2;
 			osmd.EngravingRules.PageBottomMargin = 2;
+			osmd.EngravingRules.DYMusicScoreType = state.musicRenderType === 'staff' ? 'staff' : 'jianpu'
+			// 如果为固定调,需要加入全局
+			if (state.musicRenderType === 'fixedTone') {
+				(window as any).sett = {
+					keySignature: true
+				}
+			}
 			await osmd.load(musicData.score);
 			osmd.zoom = state.zoom;
 			osmd.render();
@@ -66,6 +90,7 @@ export default defineComponent({
 			musicData.showSelection = true;
 		};
 		onBeforeMount(async () => {
+			setRenderType()
 			await getXML();
 			await init();
 			musicData.isRenderLoading = false;

+ 1 - 1
vite.config.ts

@@ -55,7 +55,7 @@ export default defineConfig({
 				rewrite: (path) => path.replace(/^\/gym/, ""),
 			},
 			"^/colexiu/.*": {
-				target: "https://dev.colexiu.com",
+				target: "https://online.colexiu.com",
 				changeOrigin: true,
 				rewrite: (path) => path.replace(/^\/colexiu/, ""),
 			},

Vissa filer visades inte eftersom för många filer har ändrats