Merge remote-tracking branch 'origin/fix-tianyong' into iteration-beat-one

src/helpers/communication.ts

@@ -65,9 +65,9 @@ export const cancelEvaluating = () => {
 };
 
 /** 评测开始录音 */
-export const api_startRecording = (): Promise<IPostMessage | undefined> => {
+export const api_startRecording = (content: any): Promise<IPostMessage | undefined> => {
 	if (!storeData.isApp) return Promise.resolve({} as any);
-	return promisefiyPostMessage({ api: "startRecording" });
+	return promisefiyPostMessage({ api: "startRecording", content: content });
 };
 /** 评测结束录音 */
 export const api_stopRecording = (): Promise<IPostMessage | undefined> => {
@@ -310,4 +310,15 @@ export const hideComplexButton = (callback: CallBack, listen?: boolean) => {
 	} else {
 		removeListenerMessage("hideComplexButton", callback);
 	}
+};
+
+
+/** 评测模式是否开启/关闭伴奏 */
+export const api_onoffAccompaniment = () => {
+	postMessage({
+		api: "onoffAccompaniment",
+		content: {
+			state: 0,
+		},
+	});
 };

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

@@ -352,14 +352,15 @@ export default defineComponent({
                 </>}
               </span>
             </div>
-            {/* {state.musicRendered && !query.lessonTrainingId && !query.questionId && state.isConcert && (
-              <div class={[styles.btn]} onClick={() => {
-                toggleMusicSheet.toggle(true)
-              }}>
+            {state.musicRendered && !query.lessonTrainingId && !query.questionId && state.isConcert && (
+              <div class={[styles.btn, (state.playState === "play" && fingeringBtn.value.disabled) && styles.disabled]} 
+                onClick={() => {
+                  toggleMusicSheet.toggle(true)
+                }}>
                 <img class={styles.iconBtn} src={headImg(`shenggui.svg`)} />
                 <span>声轨</span>
               </div>
-            )} */}
+            )}
             <div
               id={state.platform === IPlatform.PC ? "teacherTop-1" : "studnetT-1"}
               style={{ display: originBtn.value.display ? "" : "none" }}
@@ -372,8 +373,8 @@ export default defineComponent({
               <img style={{ display: state.playSource === "music" ? "none" : "" }} class={styles.iconBtn} src={headImg(`background.svg`)} />
               <span>{state.playSource === "music" ? "原声" : "伴奏"}</span>
             </div>
-            {/* <div
-              class={styles.btn}
+            <div
+              class={[styles.btn]}
               onClick={async () => {
                 metronomeData.disable = !metronomeData.disable;
                 metronomeData.metro?.initPlayer();
@@ -382,7 +383,7 @@ export default defineComponent({
               <img style={{ display: metronomeData.disable ? "block" : "none" }} class={styles.iconBtn} src={headImg("tickoff.svg")} />
               <img style={{ display: !metronomeData.disable ? "block" : "none" }} class={styles.iconBtn} src={headImg("tickon.svg")} />
               <span style={{ whiteSpace: "nowrap" }}>节拍器</span>
-            </div>             */}
+            </div>            
             <div id={state.platform === IPlatform.PC ? "teacherTop-2" : "studnetT-2"} style={{ display: selectBtn.value.display ? "" : "none" }} class={[styles.btn, selectBtn.value.disabled && styles.disabled]} onClick={() => handleChangeSection()}>
               <img style={{ display: state.section.length === 0 ? "" : "none" }} class={styles.iconBtn} src={headImg(`section0.svg`)} />
               <img style={{ display: state.section.length === 1 ? "" : "none" }} class={styles.iconBtn} src={headImg(`section1.svg`)} />

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

@@ -91,6 +91,7 @@ export default defineComponent({
       }
     };
     onBeforeMount(() => {
+      console.time("渲染加载耗时");
       api_keepScreenLongLight();
       getAPPData();
       api_setStatusBarVisibility();
@@ -111,7 +112,7 @@ export default defineComponent({
     /** 获取曲谱数据 */
     const getMusicInfo = (res: any) => {
       const index = query["part-index"] ? parseInt(query["part-index"] as string) : 0;
-      const musicData = res.data.background[index] || {};
+      const musicData = res.data.background?.[index] || {};
       const musicInfo = {
         ...res.data,
         music: musicData.audioFileUrl || res.data.audioFileUrl,
@@ -160,6 +161,8 @@ export default defineComponent({
       const track = data.code || data.track;
       state.track = track ? track.replace(/ /g, "").toLocaleLowerCase() : "";
       state.enableNotation = data.notation ? true : false;
+      // 是否是合奏，先根据background判断
+      state.isConcert = data.background?.length > 1;
 
       // console.log("🚀 ~ state.subjectId:", state.subjectId, state.track as any , state.subjectId)
       // 是否打击乐
@@ -173,7 +176,7 @@ export default defineComponent({
       state.isSpecialBookCategory = !classids.includes(data.musicSheetCategoriesId);
 
       // 设置指法
-      const code = mappingVoicePart(state.subjectId, "INSTRUMENT");
+      const code = state.isConcert ? mappingVoicePart(state.trackId, "ENSEMBLE") : mappingVoicePart(state.subjectId, "INSTRUMENT");
       state.fingeringInfo = subjectFingering(code);
       console.log("🚀 ~ state.fingeringInfo:", code, state.fingeringInfo, state.trackId, state.track);
 
@@ -190,8 +193,6 @@ export default defineComponent({
 
       //课堂乐器, 渲染类型: 五线谱, 简谱
       state.musicRenderType = query.musicRenderType || EnumMusicRenderType.firstTone;
-      // 是否是合奏，先根据background判断
-      state.isConcert = data.background?.length > 1;
       console.log("state对象", state);
     };
 
@@ -245,6 +246,7 @@ export default defineComponent({
       resetPlaybackToStart();
 
       pushAppMusic();
+      console.timeEnd("渲染加载耗时");
     };
     /** 指法配置 */
     const fingerConfig = computed<any>(() => {

src/page-instrument/view-figner/index.tsx

@@ -972,7 +972,7 @@ export default defineComponent({
                 {playAction.userAnswerStatus === 1 && <div class={[styles.tipsT, styles.playSuccess]}></div>}
                 {playAction.userAnswerStatus === 2 && <div class={[styles.tipsT, styles.playError]}></div>}
 
-                {(data.noteType !== "#c" && orientationDirection.value === 0 || orientationDirection.value === 1) && (
+                {((data.noteType !== "#c" && orientationDirection.value === 0) || orientationDirection.value === 1) && (
                   <Button class={styles.noteBtn} onClick={() => scrollNoteBox("left")}>
                     <Icon name="arrow-left" />
                   </Button>
@@ -1056,7 +1056,7 @@ export default defineComponent({
                     </div>
                   </div>
                 </div>
-                {(data.noteType !== "#c" && orientationDirection.value === 0 || orientationDirection.value === 1) && (
+                {((data.noteType !== "#c" && orientationDirection.value === 0) || orientationDirection.value === 1) && (
                   <Button class={styles.noteBtn} onClick={() => scrollNoteBox("right")}>
                     <Icon name="arrow" />
                   </Button>

src/view/evaluating/index.tsx

@@ -270,7 +270,9 @@ export const handleStartBegin = async () => {
 		onPlay();
 	}
 	//开始录音
-	await api_startRecording();
+	await api_startRecording({
+		accompanimentState: state.setting.enableAccompaniment ? 1 : 0
+	});
 
 	// 如果开启了摄像头, 开启录制视频
 	if (state.setting.camera) {

src/view/figner-preview/index.ts

@@ -5010,6 +5010,303 @@ export const FIGNER_INSTRUMENT_DATA: { [_: string]: IFIGNER_INSTRUMENT_DATA } =
 			},
 		],
 	},
+	"baroque-recorder": {
+		tips: [
+			{
+				key: 0,
+				name: "拿竖笛的方法",
+				octave: 0,
+				step: 0,
+				realKey: 0,
+				realName:
+					"把竖笛拿起来，然后放在嘴边，把它轻轻地放在你的唇间，并用你的手指拿稳。记住要把你的左手放在上边，有一个孔的背面应该正对着你，不要咬吹口或是让它碰到牙。",
+			},
+			{
+				key: 0,
+				name: "吹竖笛的力度",
+				octave: 0,
+				step: 0,
+				realKey: 0,
+				realName:
+					"向竖笛吹气，轻一点吹想象你在吹泡泡一样，控制气流的稳定并轻柔地吹奏，尝试用膈肌呼吸并确保你吹得均匀，这可以使声音稳定持续。",
+			},
+			{
+				key: 0,
+				name: "学习呼吸方法",
+				octave: 0,
+				step: 0,
+				realKey: 0,
+				realName:
+					"吹竖笛时，气息的控制是很关键的，气息分为缓吹法和急吹法，吸气要从鼻子和嘴角吸气，吸到胸部和腰部，小腹微微向里收，以使演奏有气息支持。",
+			},
+			{
+				key: 0,
+				name: "勤练习指法",
+				octave: 0,
+				step: 0,
+				realKey: 0,
+				realName:
+					"指法图是用来表示竖笛上的单音的，后背的孔叫0孔，从上到下依次为一孔、二孔、三孔、四孔、五孔、六孔、七孔，要吹奏简单的练习曲，必须要牢记单音的指法。",
+			},
+			{
+				key: 0,
+				name: "学习一些演奏技法",
+				octave: 0,
+				step: 0,
+				realKey: 0,
+				realName:
+					"单吐是用舌尖顶住上牙的牙根，用气息轻轻地把舌尖冲开，待声音发出后舌尖有弹性地返回到原来的位置，这时舌尖就像一个通气阀门，如果我们让它发出声音就像发“嘟”音的感觉。在有连线的地方只有第一个音采用单吐的技法，后面的音不再做吐音，只接前面“嘟”音的尾音发出“呜”音，整个连线里面的音就像“嘟呜”的。",
+			},
+		],
+		tones: [
+			{
+				key: 1,
+				name: "C",
+				octave: 5,
+				step: 0,
+				realKey: 0,
+				realName: "",	
+			}
+		],
+		list: [
+			{
+				key: 1,
+				name: "C",
+				octave: 5,
+				step: 0,
+				realKey: 60,
+				realName: "C5",
+			},
+			{
+				key: 2,
+				name: "D",
+				octave: 5,
+				step: 0,
+				realKey: 61,
+				mark: "fall",
+				realName: "Db5",
+			},
+			{
+				key: 2,
+				name: "D",
+				octave: 5,
+				step: 0,
+				realKey: 62,
+				realName: "D5",
+			},
+			{
+				key: 3,
+				name: "E",
+				octave: 5,
+				step: 0,
+				realKey: 63,
+				mark: "fall",
+				realName: "Eb5",
+			},
+			{
+				key: 3,
+				name: "E",
+				octave: 5,
+				step: 0,
+				realKey: 64,
+				realName: "E5",
+			},
+			{
+				key: 4,
+				name: "F",
+				octave: 5,
+				step: 0,
+				realKey: 65,
+				realName: "F5",
+			},
+			{
+				key: 5,
+				name: "G",
+				octave: 5,
+				step: 0,
+				realKey: 66,
+				mark: "fall",
+				realName: "Gb5",
+			},
+			{
+				key: 5,
+				name: "G",
+				octave: 5,
+				step: 0,
+				realKey: 67,
+				realName: "G5",
+			},
+			{
+				key: 6,
+				name: "A",
+				octave: 5,
+				step: 0,
+				realKey: 68,
+				mark: "fall",
+				realName: "Ab5",
+			},
+			{
+				key: 6,
+				name: "A",
+				octave: 5,
+				step: 0,
+				realKey: 69,
+				realName: "A5",
+			},
+			{
+				key: 7,
+				name: "B",
+				octave: 5,
+				step: 0,
+				realKey: 70,
+				mark: "fall",
+				realName: "Bb5",
+			},
+			{
+				key: 7,
+				name: "B",
+				octave: 5,
+				step: 0,
+				realKey: 71,
+				realName: "B5",
+			},
+			{
+				key: 1,
+				name: "C",
+				octave: 6,
+				step: 1,
+				realKey: 72,
+				realName: "C6",
+			},
+			{
+				key: 2,
+				name: "D",
+				octave: 6,
+				step: 1,
+				realKey: 73,
+				mark: "fall",
+				realName: "Db6",
+			},
+			{
+				key: 2,
+				name: "D",
+				octave: 6,
+				step: 1,
+				realKey: 74,
+				realName: "D6",
+			},
+			{
+				key: 3,
+				name: "E",
+				octave: 6,
+				step: 1,
+				realKey: 75,
+				mark: "fall",
+				realName: "Eb6",
+			},
+			{
+				key: 3,
+				name: "E",
+				octave: 6,
+				step: 1,
+				realKey: 76,
+				realName: "E6",
+			},
+			{
+				key: 4,
+				name: "F",
+				octave: 6,
+				step: 1,
+				realKey: 77,
+				realName: "F6",
+			},
+			{
+				key: 5,
+				name: "G",
+				octave: 6,
+				step: 1,
+				realKey: 78,
+				mark: "fall",
+				realName: "Gb6",
+			},
+			{
+				key: 5,
+				name: "G",
+				octave: 6,
+				step: 1,
+				realKey: 79,
+				realName: "G6",
+			},
+			{
+				key: 6,
+				name: "A",
+				octave: 6,
+				step: 1,
+				realKey: 80,
+				mark: "fall",
+				realName: "Ab6",
+			},
+			{
+				key: 6,
+				name: "A",
+				octave: 6,
+				step: 1,
+				realKey: 81,
+				realName: "A6",
+			},
+			{
+				key: 7,
+				name: "B",
+				octave: 6,
+				step: 1,
+				realKey: 82,
+				mark: "fall",
+				realName: "Bb6",
+			},
+			{
+				key: 7,
+				name: "B",
+				octave: 6,
+				step: 1,
+				realKey: 83,
+				realName: "B6",
+			},
+			{
+				key: 1,
+				name: "C",
+				octave: 7,
+				step: 2,
+				realKey: 84,
+				realName: "C7",
+			},
+			{
+				key: 2,
+				name: "D",
+				octave: 7,
+				step: 2,
+				realKey: 85,
+				mark: "fall",
+				realName: "Db7",
+			},
+			{
+				key: 2,
+				name: "D",
+				octave: 7,
+				step: 2,
+				realKey: 86,
+				realName: "D7",
+			},
+			{
+				key: 3,
+				name: "D",
+				octave: 7,
+				step: 2,
+				realKey: 87,
+				mark: "fall",
+				realName: "Gb7",
+			},
+		],
+	},
 };
 
 

src/view/fingering/fingering-config.ts

@@ -52,10 +52,13 @@ export type IVocals =
   | "ocarina1"
   | "ocarina2"
   | "melodica"
-  | "melodica1";
+  | "melodica1"
+  | "baroque-recorder"
+  | "baroque-recorder1"
+  | "baroque-recorder2";
 
 /** 映射声部ID */
-export const mappingVoicePart = (id: number | string, soruce: "GYM" | "COLEXIU" | "ORCHESTRA" | "INSTRUMENT"): number => {
+export const mappingVoicePart = (id: number | string, soruce: "GYM" | "COLEXIU" | "ORCHESTRA" | "INSTRUMENT" | "ENSEMBLE"): number => {
   if (soruce === "GYM") {
     return Number(id);
   } else if (soruce === "COLEXIU") {
@@ -116,18 +119,107 @@ export const mappingVoicePart = (id: number | string, soruce: "GYM" | "COLEXIU"
       ukulele: 130,
       mouthorgan: 140,
       piano: 150,
+	  baroquerecorder: 'baroque-recorder',
       4: "piccolo",
       3: "hulusi-flute",
       1: "pan-flute",
       2: "ocarina",
       5: "melodica",
+      23: 2,
+      24: 6,
+      25: 4,
+      26: 12,
+      27: 14,
+      28: 13,
+      29: 15,
+      30: 17,
       tenorrecorder: "piccolo",
       woodwind: "hulusi-flute",
       panpipes: "pan-flute",
       ocarina: "ocarina",
       nai: "melodica",
+      15: "baroque-recorder",
     };
     return subject[code] || 0;
+  } else if (soruce === "ENSEMBLE") {
+    let code = id;
+    const subject: { [_key: string | number]: any } = {
+      Piccolo: "piccolo",
+      Flute: 2,
+      "Flute 1": 2,
+      "Flute 2": 2,
+      Oboe: 1,
+      "Clarinet in Bb 1": 4,
+      "Clarinet in Bb 2": 4,
+      "Alto Clarinet in Eb": 4,
+      "Bass Clarinet in Bb": 4,
+      Bassoon: 1,
+      "Alto Saxophone": 5,
+      "Tenor Saxophone": 5,
+      "Baritone Saxophone": 5,
+      "Trumpet in Bb 1": 12,
+      "Trumpet in Bb 2": 12,
+      "Horn in F": 13,
+      "Horn in F 1": 13,
+      "Horn in F 2": 13,
+      "Trombone 1": 14,
+      "Trombone 2": 14,
+      "Trombone 3": 14,
+      Euphonium: 15,
+      Tuba: 17,
+      Chimes: 1,
+      Bells: 1,
+      Xylophone: 1,
+      "Snare Drum": 1,
+      "Bass Drum": 1,
+      Triangle: 1,
+      "Suspended Cymbal": 1,
+      "Crash Cymbals": 1,
+      "Concert Toms": 1,
+      Timpani: 1,
+      flute: 2,
+      oboe: 4,
+      clarinet: 4,
+      trombone: 14,
+      tuba: 17,
+      trumpet: 12,
+      horn: 13,
+      altosaxophone: 6,
+      tenorsaxophone: 6,
+      saxophone: 6,
+      upbasshorn: 15,
+      melodica: 137,
+      hulusiFlute: 136,
+      panflute: 135,
+      recorder: 120,
+      ukulele: 130,
+      mouthorgan: 140,
+      piano: 150,
+      4: "piccolo",
+      3: "hulusi-flute",
+      1: "pan-flute",
+      2: "ocarina",
+      5: "melodica",
+      26: 12,
+      tenorrecorder: "piccolo",
+      woodwind: "hulusi-flute",
+      panpipes: "pan-flute",
+      ocarina: "ocarina",
+      nai: "melodica",
+	  BaroqueRecorder: 'baroque-recorder',
+    };
+    let _track;
+    if (typeof code === "string") {
+      for (let sKey in subject) {
+        if (sKey === code) {
+          _track = subject[sKey];
+          break;
+        }
+      }
+    } else {
+      _track = subject.code;
+    }
+    return _track;
   }
   return 0;
 };
@@ -200,7 +292,7 @@ export const subjectFingering = (subjectId: number | string): IFingering => {
         orientation: 1,
         hasTizhi: true,
       };
-    case "piccolo": // 竖笛
+    case "piccolo": // 德式竖笛
       return {
         name: "piccolo",
         direction: "vertical",
@@ -247,6 +339,15 @@ export const subjectFingering = (subjectId: number | string): IFingering => {
         code: "口风琴",
         hasTizhi: false,
       };
+	case "baroque-recorder": // 英式竖笛
+	  return {
+		name: "baroque-recorder",
+		direction: "vertical",
+		width: "3rem",
+		orientation: 1,
+		code: "竖笛",
+		hasTizhi: true,
+	  };	  
     default:
       return {};
   }
@@ -447,7 +548,25 @@ export const getFingeringConfig = async (type: IVocals | undefined): Promise<ITy
           marginTop: "auto",
         },
       };
+	case "baroque-recorder":
+		const baroqueRecorder = await import(`./fingering-img/baroque-recorder/index.json`);
+		return {
+			json: baroqueRecorder.default,
+			relationship: relationships.baroqueRecorder,
+		};  	
+	case "baroque-recorder1":
+		const baroqueRecorder1 = await import(`./fingering-img/baroque-recorder1/index.json`);
+		return {
+			json: baroqueRecorder1.default,
+			relationship: relationships.baroqueRecorder,
+		};	
+	case "baroque-recorder2":
+		const baroqueRecorder2 = await import(`./fingering-img/baroque-recorder2/index.json`);
+		return {
+			json: baroqueRecorder2.default,
+			relationship: relationships.baroqueRecorder,
+		};			  
     default:
       return null;
   }
-};
+};

src/view/fingering/fingering-relationships.ts

@@ -385,31 +385,31 @@ const relationships = {
 		82: [1, 2, 33, 5, 6, 7],
 		83: [1, 2, 33, 5, 6],
 		84: [1, 2, 5, 6],
-		85: [1, 2, 4, 5, 7, 8],
-		86: [1, 2, 4, 5, 7, 88],
+		85: [1, 2, 4, 5, 7, 8, 100],
+		86: [1, 2, 4, 5, 7, 8],
 	},
 	"small-drum": {
 		0: ["active", "active-left", "active-right"],
 		64: ["left", "right"],
 	},
 	hulusi: {
-		64: [7, 6, 5, 4, 3, 2, 1, 91],
-		65: [7, 6, 5, 4, 3, 2, 11, 91],
+		64: [7, 6, 5, 4, 3, 2, 11, 91],
+		65: [7, 6, 5, 4, 3, 2, 1, 91],
 		66: [7, 6, 5, 4, 3, 2, 91],
-		67: [7, 6, 5, 4, 3, 2, 1, 92],
-		68: [7, 6, 5, 4, 3, 2, 11, 92],
+		67: [7, 6, 5, 4, 3, 2, 11, 92],
+		68: [7, 6, 5, 4, 3, 2, 1, 92],
 		69: [7, 6, 5, 4, 3, 2, 93],
-		70: [7, 6, 5, 4, 3, 1, 93],
+		70: [7, 6, 5, 4, 3, 11, 93],
 		71: [7, 6, 5, 4, 3, 93],
-		72: [7, 6, 5, 4, 94],
-		73: [7, 6, 5, 3, 2, 94],
-		74: [7, 6, 5, 94],
-		75: [7, 6, 4, 3, 94],
-		76: [7, 6, 94],
-		77: [7, 5, 4, 3, 2, 95],
-		78: [7, 5, 4, 95],
-		79: [7, 95],
-		80: [6, 95],
+		72: [7, 6, 5, 4, 95],
+		73: [7, 6, 5, 3, 2, 95],
+		74: [7, 6, 5, 95],
+		75: [7, 6, 4, 3, 95],
+		76: [7, 6, 95],
+		77: [7, 5, 4, 3, 2, 94],
+		78: [7, 5, 4, 94],
+		79: [7, 94],
+		80: [6, 94],
 		81: [96],
 	},
 	pan: {
@@ -492,6 +492,49 @@ const relationships = {
 		83: [18],
 		84: [19],
 	},
+	baroqueRecorder: { // 英式竖笛
+		// 0: [1, 2, 3, 4, 5, 6, 7, 8, 11, 33, 77, 88],
+		// 888: [11, 2, 33, 4, 5, 6, 7, 8],
+		60: [11, 2, 33, 4, 5, 6, 7, 8],
+		61: [11, 2, 33, 4, 5, 6, 7, 88],
+		62: [11, 2, 33, 4, 5, 6, 7],
+		63: [11, 2, 33, 4, 5, 6, 77],
+		64: [11, 2, 33, 4, 5, 6],
+		65: [11, 2, 33, 4, 5, 7, 8],
+		66: [11, 2, 33, 4, 6, 7],
+		67: [11, 2, 33, 4],
+		68: [11, 2, 33, 5, 6, 77],
+		69: [11, 2 ,33],
+		70: [11, 2, 4, 5],
+		71: [11, 2],
+		72: [11, 33],
+		73: [2, 33],
+		74: [33],
+		75: [ 33, 4, 5, 6, 7],
+		76: [1, 2, 33, 4, 5, 6],
+		77: [1, 2, 33, 4, 5, 7],
+		78: [1, 2, 33, 4, 6],
+		79: [1, 2, 33, 4],
+		80: [1, 2, 33, 5],
+		81: [1, 2, 33],
+		82: [1, 2, 33, 5, 6, 7],
+		83: [1, 2, 33, 5, 6],
+		84: [1, 2, 5, 6],
+		85: [1, 2, 4, 5, 7, 8, 100],
+		86: [1, 2, 4, 5, 7, 8],
+		87: [1, 2, 4],
+		88: [1, 2, 33, 4, 5, 6],
+		89: [1, 2, 33, 4, 5, 7],
+		90: [1, 2, 33, 4, 6],
+		91: [1, 2, 33, 4],
+		92: [1, 2, 33, 5],
+		93: [1, 2, 33],
+		94: [1, 2, 33, 5, 6, 7],
+		95: [1, 2, 33, 5, 6],
+		96: [1, 2, 5, 6],
+		97: [1, 2, 4, 5, 7, 8],
+		98: [1, 2, 4],
+	  },	
 };
 
 export default relationships;

src/view/fingering/index.module.less

@@ -17,26 +17,26 @@
     flex: 1;
   }
 
-  &::before {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 0;
-    right: 0;
-    height: 30px;
-    background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
-    z-index: 1;
-  }
-  &::after {
-    content: '';
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    height: 30px;
-    background: linear-gradient(360deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
-    z-index: 1;
-  }
+  // &::before {
+  //   content: '';
+  //   position: absolute;
+  //   left: 0;
+  //   top: 0;
+  //   right: 0;
+  //   height: 30px;
+  //   background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
+  //   z-index: 1;
+  // }
+  // &::after {
+  //   content: '';
+  //   position: absolute;
+  //   left: 0;
+  //   bottom: 0;
+  //   right: 0;
+  //   height: 30px;
+  //   background: linear-gradient(360deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
+  //   z-index: 1;
+  // }
 }
 
 .imgs {

src/view/plugins/toggleMusicSheet/choosePartName/index.tsx

@@ -1,4 +1,4 @@
-import { PropType, computed, defineComponent, ref, toRefs } from 'vue'
+import { PropType, computed, defineComponent, ref, toRefs, onMounted } from 'vue'
 import { Picker, Button, Icon } from 'vant'
 import styles from './index.module.less'
 
@@ -21,7 +21,16 @@ export default defineComponent({
     const columns = computed(() => {
       return partListNames.value
     })
-    console.log(partListNames.value, partIndex.value, selectIndex.value, columns.value, 999999)
+    // console.log(partListNames.value, partIndex.value, selectIndex.value, columns.value, 999999)
+    /**
+     * 默认选中的
+     * picker组件，3.x的版本可以使用defaultIndex，4.x的版本只能使用v-model传递
+     * */ 
+    const selValues = ref([partIndex.value]);
+    const myPicker = ref();
+    onMounted(() => {
+			console.log(myPicker.value)
+		});
     return () => (
       <div class={styles.container}>
         <div class={styles.top}>
@@ -29,8 +38,10 @@ export default defineComponent({
           <Icon name="cross" size={24} onClick={() => emit('close')} />
         </div>
         <Picker
+          ref={myPicker}
           class={styles.picker}
           defaultIndex={props.partIndex}
+          v-model={selValues.value}
           showToolbar={false}
           columns={columns.value}
           visibleItemCount={Math.ceil(document.body.clientHeight / 44 / 3)}

src/view/plugins/toggleMusicSheet/index.tsx

@@ -2,7 +2,6 @@ import { computed, defineComponent, reactive } from 'vue'
 import styles from './index.module.less'
 import { Icon, Popup } from 'vant'
 import ChoosePartName from './choosePartName'
-import runtime, * as RuntimeUtils from '/src/pages/detail/runtime'
 import state, { togglePlay } from "/src/state";
 import qs from 'query-string'
 import { getInstrumentName } from "/src/constant/instruments";
@@ -33,6 +32,7 @@ export default defineComponent({
     })
 
     const switchMusic = (index: number) => {
+      if (state.partIndex === index) return
       // 暂停播放
       togglePlay("paused");
       // 销毁播放器